Question

如果为该特定行选择了All all Checkbox，我想检查/取消选中表格中特定行的所有复选框

这是单行的html。

<tr>
    <td class="left">
        <label>Admin - Organization</label>
    </td>

    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="selectallAO" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxViewAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxAddAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxEditAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxDeleteAOrganization" runat="server" /></label>
        </div>
    </td>                                
</tr>

其他页面也有5个这样的其他行。因此，我想检查/取消选中已选中/取消选中全选的特定行的所有复选框。

Answer 1

<强>更新

更新了jQuery函数，使主复选框覆盖子复选框状态。

这样的事听起来怎么样？我不确定哪些类是你的复选框，所以你必须稍微调整一下：

<强> HTML：

<div class="spacer"><input type="checkbox" class="selectallAO"> Select All</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>

<强> CSS：

div.spacer {
    display: block;
}

<强> JS：

$('.selectallAO').click(function() {
    this.checked ? $('.checkboxAO').prop('checked', true) : $('.checkboxAO').prop('checked', false);
});

jsFiddle

Answer 2

.parents（＆＃34; form：first＆＃34;）选择器确保它仅适用于与您要更改的输入格式相同的元素。如果由于某种原因你想要更改表单之外的元素，那么你需要删除它。

＆＃13;

$(function() {
  $(".selectallAO").on("click", function() {
    debugger;
    if ($(this).prop("checked")) {
      $(this).parents("form:first").children(".checkboxAO").prop("checked", true);
    } else {
      $(this).parents("form:first").children(".checkboxAO").prop("checked", false);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="test" value="1" class="selectallAO">Select All</input>
  <input type="checkbox" name="test" value="1" class="checkboxAO">1</input>
  <input type="checkbox" name="test" value="2" class="checkboxAO">2</input>
  <input type="checkbox" name="test" value="3" class="checkboxAO">3</input>
  <input type="checkbox" name="test" value="4" class="checkboxAO">4</input>
</form>

＆＃13;

使用Javascript或jQuery选择所有复选框

2 个答案: