Question

我有一个表格，显示已删除项目的列表。

用户可以恢复该项目或永久删除。我需要帮助，只在表格行中选中一个复选框，并在用户尝试检查两者时取消选中其他复选框。此外，当在表头中选中复选框时，它应该选择该td中的所有复选框。

＆＃13;

$(function() {
  $('input.example').on('change', function() {
    $("tr").closest('input.example').not(this).prop('checked', false);
  });
});

＆＃13;

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

＆＃13;

Answer 1

这正好你应该使用无线电输入而不是复选框的场景，因为默认情况下你会得到这种行为，而不需要任何JS代码。您所要做的就是按照input属性对所需的name元素进行分组。试试这个：

<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

我在没有使用单选按钮并且工作正常的情况下自己想出来了。

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>

当以角度检查其他复选框时，如何取消选中复选框

2 个答案: