Jquery 选择表中的所有复选框

问题描述 投票：0回答：5

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

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/

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

jquery checkbox
5个回答
106
投票

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

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

演示：小提琴

属性与属性

6
投票

简单的 jQuery 解决方案，检测表内选中的输入，并更改主（selectAll）复选框的状态：

$(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>[email protected]</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>[email protected]</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>[email protected]</td>
      <td>11 Jan, 2020 at 01:47 am</td>
    </tr>
  </tbody>
</table>

或香草溶液：

let table = document.querySelector('.table'); // table selector 
let selectAll = table.querySelector('#selectAll'); // main checkbox inside table thead
let tdCheckbox = table.querySelectorAll('tbody input[type="checkbox"]'); // checboxes inside table body
let tdCheckboxChecked = 0; // checked checboxes

// Select or deselect all checkboxes depending on main checkbox change
selectAll.addEventListener('click', () => {
  Array.from(tdCheckbox).forEach(el => {
    el.checked = selectAll.checked;
  })
});

// Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
Array.from(tdCheckbox).forEach(el => {
  el.addEventListener('change', function(e){
    tdCheckboxChecked = Array.from(tdCheckbox).filter(el => el.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.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);
}
    <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>[email protected]</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>[email protected]</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>[email protected]</td>
          <td>11 Jan, 2020 at 01:47 am</td>
        </tr>
      </tbody>
    </table>

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>
2
投票

这对于区分 prop() 和 attr() 之间的差异可能很有用。请注意本文中的这一行 .prop() 与 .attr():

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

所以一般情况下，使用 prop() 而不是 attr()。

0
投票

以防万一 

<tbody>
中有 
<table>
，在衣柜桌子上找到 
<td>
是行不通的。

它对我来说是这样的：

$(document).ready(function() {
    $('#selectAll').click(function(e){        
        $(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
    });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.