jQuery - 切换选择所有复选框 [英] jQuery - toggle select all checkboxes

问题描述

<$ p $

$ b p> < table>
< thead>
< tr>
< th>< input type =checkboxname =selectAllonclick =selectAll（this.checked）;/>< / th>
< / tr>
< / thead>
< tbody>
< td>
< td>< input type =checkboxname =domainListvalue =$ {domainInstance.id}/>< / td>
< / tbody>
< table>


我在主gsp中有以下javascript代码片段，调用模板：

  function selectAll（status）{
 
} 
  

如何从selectAll名称中选择所有复选框？

解决方案

你正在使用jQuery，你应该使用 onclick 处理程序，如下面的selectAll。

  $（'：checkbox [name = selectAll]'）click（function（）{
 $（'：checkbox [name = domainList]'）。prop（'checked'，this.checked）; 
}）; 
  

请注意，上述代码将查看整个dom的复选框与 name = selectAll 并设置 name = domainList 复选框的状态。

以下是稍微好一点的标记更改版本，

jsFiddle DEMO

  $（'＃selectAllDomainList'）。 .checked; $（'＃domainTable tbody tr'）。find（'td：first：checkbox'）每个（function（）{$（this）.prop（'checked'，checkedStatus）;}）;}）  

 < script src =https：// ajax。 googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"> ;</script> ;<table id =domainTable> <！ - 已添加ID  - > < aad> < tr> < th> ;. <！ - 已将ID添加到以下选择框 - > < input type =checkboxname =selectAllid =selectAllDomainList/> < / th> < / tr> < / thead> < tbody> < tr> < td> < input type =checkboxname =domainListvalue =$ {domainInstance.id}/> < / td> < / tr> < tr> < td> < input type =checkboxname =domainListvalue =$ {domainInstance.id}/> < / td> < / tr> < tr> < td> < input type =checkboxname =domainListvalue =$ {domainInstance.id}/> < / td> < / tr> < tr> < td> < input type =checkboxname =domainListvalue =$ {domainInstance.id}/> < / td> < / tr> < / tbody> < table>  

Fought with a bunch of examples and, being still new to jQuery/Javascript, cannot get my code to function (here my my template in gsp):

<table>
    <thead>
    <tr>
       <th><input type="checkbox" name="selectAll" onclick="selectAll(this.checked);"/></th>
    </tr>
    </thead>
    <tbody>
         <td>
            <td><input type="checkbox" name="domainList" value="${domainInstance.id}"/></td>
    </tbody>
<table>

I have the following javascript snippet in my main gsp, that calls the template:

function selectAll(status) {

}

How do I select all checkboxes from the selectAll name?

解决方案

Since you are using jQuery, you should use an onclick handler like below for selectAll.

$(':checkbox[name=selectAll]').click (function () {
  $(':checkbox[name=domainList]').prop('checked', this.checked);
});

Please note that the above code is going to look into the entire dom for the checkbox with name=selectAll and set the status of the checkbox with name=domainList.

Below is a slightly better version with minor markup change,

jsFiddle DEMO

$('#selectAllDomainList').click(function() {
  var checkedStatus = this.checked;
  $('#domainTable tbody tr').find('td:first :checkbox').each(function() {
    $(this).prop('checked', checkedStatus);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="domainTable">
  <!-- Added ID -->
  <thead>
    <tr>
      <th>
        <!-- Added ID to below select box -->
        <input type="checkbox" name="selectAll" id="selectAllDomainList" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
  </tbody>
  <table>

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