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

Question

如果为特定行选择了“全选复选框”，我想选中/取消选中表格中特定行的所有复选框

这是单行的 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 行这样的行。所以，我想选中/取消选中选中/取消选中 Select All 的特定行的所有复选框。

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("form:first") 选择器确保它仅适用于与您要更改的输入具有相同形式的元素。如果出于某种原因您想更改表单之外的元素，则需要将其删除。

$(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);
    }
  });
});

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