CODEWITHSUNDEEP
javascriptjqueryhtmlangularjscheckbox
Sampath
Sampath

Reputation: 90

how to make checkbox unchecked when other checkbox is checked in angular

I have a table where it shows the list of deleted items.

User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.

$(function() {
  $('input.example').on('change', function() {
    $("tr").closest('input.example').not(this).prop('checked', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
  <table>
    <th>
      <label>
        <input type="checkbox" class="example" />Recover</label>
      <label>
        <input type="checkbox" class="example" />Delete</label>
    </th>
    <tr>
      <td>
        <input type="checkbox" class="example" />
      </td>
      <td>
        <input type="checkbox" class="example" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="example" />
      </td>
      <td>
        <input type="checkbox" class="example" />
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Views: 3871

Answers (2)

Sampath
Sampath

Reputation: 90

i figured it out myself without using radio buttons and its working fine.

JS code

    $scope.uncheckPermDelete = function (ip) {
 if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
        $("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
        ip.perm_delete = 0;
    }
};

$scope.uncheckRecover= function (ip) {
     if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
        $("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
        ip.deleted = 1;
    }
};

HTML code

<td ><input class="recover_check" name="recover_check_{{ip.id}}"  ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337700

This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:

<div ng-app>
  <table>
    <th>
      <label><input type="radio" name="foo1" />Recover</label>
    </th>
    <th>
      <label><input type="radio" name="foo1" />Delete</label>
    </th>
    <tr>
      <td>
        <input type="radio" name="foo2" />
      </td>
      <td>
        <input type="radio" name="foo2" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="foo3" />
      </td>
      <td>
        <input type="radio" name="foo3" />
      </td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions