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

Question

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>

Answer 1

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>

Answer 2

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>