Question

我有一个表，当单击行第一列中的复选框时，该表用数据填充表行。那部分工作正常。有一个标题列，其中包含“全部选择”字样。复选框。选中该复选框后，应填充所有行并选中相应的复选框。这在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);
    }
});

Answer 1

请花一点时间阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton。

＆＃13;

$('.js-selectall').on('change', function() {
  var isChecked = $(this).prop("checked");
  var selector = $(this).data('target');
  $(selector).prop("checked", isChecked);
});

＆＃13;

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

＆＃13;

可重复使用且松散耦合。

Answer 2

我只是在小提琴中编码。请调查一下。

$(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/

单击一个复选框时，选中表格中的所有复选框

2 个答案: