他のチェックボックスをオンにしたときにチェックボックスをオフにする方法

Question

削除されたアイテムのリストを表示するテーブルがあります。

ユーザーは、アイテムを復元するか、永久に削除することができます。テーブル行で1つのチェックボックスだけがチェックされ、ユーザが両方をチェックしようとすると、他のチェックボックスのチェックを外すことには助けが必要です。また、チェックボックスがテーブルヘッダーでチェックされている場合、そのテーブルのすべてのチェックボックスを選択する必要があります。

$(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

：これを試してみてください。

JSコード

$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コード

<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> 

Answer 2

これは、あなたが任意のJSコードを必要とせずに、デフォルトでこの動作を取得するとして、あなたはラジオの入力ではなく、チェックボックスを使用する必要があります正確シナリオです。必要なのは、name属性で、必要なinput要素をグループ化するだけです。私はラジオボタンとその作業罰金を使用せずに自分自身をそれを考え出し

<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>