单击单个复选框时选择表中的所有复选框

Selecting all checkboxes in a table when a single checkbox is clicked

本文关键字：复选框 选择 单个 单击      更新时间：2023-09-26

我有一个表，当单击行第一列中的复选框时，用数据填充表行。那部分工作正常。有一个标题列与"选择全部"复选框。选中该复选框后，应该填充所有行并选中相应的复选框。这在IE上正常工作，但在Chrome和Firefox上，数据正在填充，但复选框没有被选中。什么好主意吗?

$('.selectAll input[type="checkbox"]').change(function () {
    var thistable = $(this).parents('table');
    if (this.checked) {
        populateOptions(thistable);
        thistable.find('.hiddenUntilOrder').addClass('showItems');
        thistable.find('tr').each(function () {
            $(this).find('.distribution').rules("add", { required: true, messages: { required: "" } });
        });
        thistable.find('.checkbox').prop("checked", true);
    } else {
        thistable.find('.hiddenUntilOrder').removeClass('showItems').rules("remove");
        thistable.find('tr').each(function () {
            $(this).find('.distribution').rules("remove");
        });
        thistable.find('.checkbox').prop("checked", false);
    }
});

花点时间阅读解耦你的HTML, CSS和JavaScript - Philip Walton。

$('.js-selectall').on('change', function() {
  var isChecked = $(this).prop("checked");
  var selector = $(this).data('target');
  $(selector).prop("checked", isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-selectall" data-target=".js-selectall1" />
<table>
  <tr>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
  </tr>
</table>

我刚刚用fiddle编写了代码。请调查一下。

$(document).ready(function(){   
  $('#selectAll').click(function(){
        $('.selectRow').prop('checked', true);
      if(!$(this).prop("checked")) {
            $('.selectRow').prop('checked', false);
      }
  });
  $('.selectRow').change(function() {
        if(!$(this).prop("checked")) {
          $('#selectAll').prop('checked', false);
      } else {
         if ($('.selectRow:checked').length === $('.selectRow').length) {
             $('#selectAll').prop('checked', true);
         }
      }
  });
});
https://jsfiddle.net/sbwfcxnr/2/

相关文章：