jQuery – 切换选择所有复选框

前端之家收集整理的这篇文章主要介绍了jQuery – 切换选择所有复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
与一大堆示例进行比较,并且仍然是jQuery / Javascript的新手,无法让我的代码运行(这里是我在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>

我的主要gsp中有以下JavaScript代码段,它调用模板:

function selectAll(status) {

}

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

解决方法

由于您使用的是jQuery,所以应该使用如下所示的onclick处理程序。
$(':checkBox[name=selectAll]').click (function () {
  $(':checkBox[name=domainList]').prop('checked',this.checked);
});

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

以下是稍微更好的版本,稍加改动,

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相关文章