24

我有一个脚本应该检查表中的所有复选框。它第一次检查它们，之后取消选中它们。但是，当我尝试重新检查它们时，什么也没有发生。

jQuery：

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).attr('checked',e.target.checked);
});

的HTML：

<table>
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>
            hi!
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="1"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="2"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
</table>

这是行为的一个小提琴：

http://jsfiddle.net/EEJrU/

为什么单击一次后它不起作用？

4

5 回答 5

97

您需要使用.prop()而不是.attr()

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).prop('checked',this.checked);
});

演示：小提琴

属性与属性

于 2013-10-03T16:52:37.373 回答
5

简单的 jQuery 解决方案，检测表内的已检查输入，以及主（全选）复选框的状态更改：

$(document).ready(function() {
  var $selectAll = $('#selectAll'); // main checkbox inside table thead
  var $table = $('.table'); // table selector 
  var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body
  var tdCheckboxChecked = 0; // checked checboxes

  // Select or deselect all checkboxes depending on main checkbox change
  $selectAll.on('click', function () {
    $tdCheckbox.prop('checked', this.checked);
  });

  // Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
  $tdCheckbox.on('change', function(e){
    tdCheckboxChecked = $table.find('tbody input:checkbox:checked').length; // Get count of checkboxes that is checked
    // if all checkboxes are checked, then set property of main checkbox to "true", else set to "false"
    $selectAll.prop('checked', (tdCheckboxChecked === $tdCheckbox.length));
  })
});
table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #222;
}

table tr th {
  background: #333;
  color: #eee;
}

table tr:nth-child(odd) td {
  background: #ececec;
}

td, th {
  padding: 10px 14px;
  text-align: center;
  border: none;
}

.checkbox {
  position: relative;
}

.checkbox [type="checkbox"] {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.checkbox [type="checkbox"] + label {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid;
  cursor: pointer;
  border-radius: 2px;
  will-change: color;
  transition: .2s color ease-in-out;
}

table thead .checkbox [type="checkbox"] + label:hover,
table thead .checkbox [type="checkbox"] + label:hover:after {
  color: #d80;
}

table tbody .checkbox [type="checkbox"] + label:hover,
table tbody .checkbox [type="checkbox"] + label:hover:after {
  color: #8d0;
}

.checkbox [type="checkbox"] + label:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 12px;
  top: 50%;
  left: 50%;
  border-bottom: 2px solid;
  border-right: 2px solid;
  margin-top: -2px;
  opacity: 0;
  transform: translate(-50%, 0%) rotate(45deg) scale(.75);
  will-change: opacity, transform, color;
  transition: .17s opacity ease-in-out, .2s transform ease-in-out, .2s color ease-in-out;
}

.checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <input type="checkbox" id="selectAll">
          <label for="selectAll"></label>
        </div>
      </th>
      <th>Email</th>
      <th>Join date <i class="arrow bottom"></i></th>
    </tr>
  </thead>
  
  <tbody>
    <tr class="active">
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox1">
          <label for="tr-checkbox1"></label>
        </div>
      </td>
      <td>example@gmail.com</td>
      <td>21 Oct, 2016 at 11:29 pm</td>
    </tr>

    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox2">
          <label for="tr-checkbox2"></label>
        </div>
      </td>
      <td>some_one@aol.com</td>
      <td>03 Mar, 2018 at 08:36 am</td>
    </tr>

    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="tr-checkbox3">
          <label for="tr-checkbox3"></label>
        </div>
      </td>
      <td>another@mail.net</td>
      <td>11 Jan, 2020 at 01:47 am</td>
    </tr>
  </tbody>
</table>

于 2017-01-07T08:12:02.467 回答
4 
    <HTML>
    <HEAD>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    </HEAD>
    <BODY>

    <table border="1">
    <tr>
        <th><input type="checkbox" id="selectall"/></th>
        <th>Cell phone</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
        <td>BlackBerry Bold 9650</td>
        <td>2/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
        <td>Samsung Galaxy</td>
        <td>3.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
        <td>Droid X</td>
        <td>4.5/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
        <td>HTC Desire</td>
        <td>3/5</td>
    </tr>
    <tr>
        <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
        <td>Apple iPhone 4</td>
        <td>5/5</td>
    </tr>
    </table>

    </BODY>
    </HTML>




<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            oTable = $('#datatable').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });

            $("#selectall").click(function () {
                var checkAll = $("#selectall").prop('checked');
                    if (checkAll) {
                        $(".case").prop("checked", true);
                    } else {
                        $(".case").prop("checked", false);
                    }
                });

            $(".case").click(function(){
                if($(".case").length == $(".case:checked").length) {
                    $("#selectall").prop("checked", true);
                } else {
                    $("#selectall").prop("checked", false);
                }

            });
        } );




    </script>
于 2014-06-04T05:14:56.817 回答
2

这可能对 prop() 和 attr() 之间的区别很有用。请注意本文.prop() 与 .attr()中的这一行：

“属性值反映的是默认值而不是当前可见状态（某些旧版本的 IE 除外，因此使事情变得更加困难）。该属性不会告诉您页面上的复选框是否被选中。”

所以一般来说，使用 prop() 而不是 attr()。

于 2013-10-03T17:16:35.063 回答
0

以防万一<tbody>，<table>查找<td>壁橱表不起作用。

它像这样和我一起工作：

$(document).ready(function() {
    $('#selectAll').click(function(e){        
        $(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
    });
});
于 2018-11-06T19:42:24.960 回答