选择所有使用Javascript或jQuery的复选框 [英] Select all checkboxes using Javascript or jQuery

问题描述

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

这里是单行。

 < tr> 
< td class =left> 
< label>管理员 - 组织< / label> 
< / td> 
 
< td> 
< div class =checkbox> 
< label>< asp：CheckBox cssclass =selectallAOrunat =server/>< / label> 
< / div> 
< / td> 
< td> 
< div class =checkbox> 
< label>< asp：CheckBox cssclass =checkboxAOID =chkbxViewAOrganizationrunat =server/>< / label> 
< / div> 
< / td> 
< td> 
< div class =checkbox> 
< label>< asp：CheckBox cssclass =checkboxAOID =chkbxAddAOrganizationrunat =server/>< / label> 
< / div> 
< / td> 
< td> 
< div class =checkbox> 
< label>< asp：CheckBox cssclass =checkboxAOID =chkbxEditAOrganizationrunat =server/>< / label> 
< / div> 
< / td> 
< td> 
< div class =checkbox> 
< label>< asp：CheckBox cssclass =checkboxAOID =chkbxDeleteAOrganizationrunat =server/>< / label> 
< / div> 
< / td> 
< / tr> 
  

其他页面也有5个这样的行。因此，我想检查/取消选中所有复选框的Select Select被选中/取消选中的特定行。 父母（form：first）选择器确保它仅适用于与您想要更改的输入形式相同的那些元素。如果由于某种原因，您想更改表单之外的元素，那么您将需要删除该元素。

$（function（）{$ （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>< /脚本><形式> < input type =checkboxname =testvalue =1class =selectallAO>全选< /输入> < input type =checkboxname =testvalue =1class =checkboxAO> 1< / input> < input type =checkboxname =testvalue =2class =checkboxAO> 2< / input> < input type =checkboxname =testvalue =3class =checkboxAO> 3< / input> < input type =checkboxname =testvalue =4class =checkboxAO> 4< / input>< / form>

I want to check/uncheck all check boxes of a particular row in a table if Select all Checkbox is selected for that particular row

Here is the html for a single row.

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

There are 5 other rows like this for other pages as well. So, I want to check/uncheck all checkbox's for a particular row for which Select All was checked/unchecked.

解决方案

The .parents("form:first") selector ensures that it only applies to those elements that are in the same form as the inputs you want to change. If for some reason you want to change elements outside of the form then you will need to remove that.

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

这篇关于选择所有使用Javascript或jQuery的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！