简单的jQuery解决方案，检测表中选中的输入，并更改main（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>

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

字符串

5条答案

按热度按时间

eiee3dmh1#

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

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

字符串
演示：Fiddle
属性与属性

赞(0）回复(0）举报 2023-11-17

rqmkfv5c2#

sulc1iza3#

xxhby3vn4#

这可能对prop（）和attr（）之间的区别很有用。请注意本文.prop() vs .attr()中的这一行：
“该属性值反映默认状态，而不是当前可见状态（某些较旧版本的IE除外，因此操作更加困难）。该属性不会告诉您有关页面上的复选框是否被选中的任何信息。”
所以一般来说，使用prop（）而不是attr（）。

sf6xfgos5#

万一<table>中有<tbody>，查找<td>到closet表不起作用。
它对我的作用是这样的：

$(document).ready(function() {
    $('#selectAll').click(function(e){        
        $(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
    });
});

Jquery选择表中的所有复选框

5条答案

相关问题

热门标签

最新问答