Question

如果我有以下示例代码：

<table id="table1">
  <tr>
    <td><input type="checkbox" id="first">first thing</td>
  </tr>
</table>  

<table id="table2">
  <tr>
    <td><input type="checkbox" id="second">second thing</td>
    <td><input type="checkbox" id="third">third thing</td>
    <td><input type="checkbox" id="fourth">fourth thing</td>
    <td><input type="checkbox" id="fifth">fifth thing</td>
  </tr>
</table>

我试图这样做，如果你取消选中'first thing'框，所有其他框也会取消选中（如果它们被选中）。此外，想要包括如果选中任何方框2到5，则还必须检查方框1。

Answer 1

首先取消选中时取消选中所有其他框：

$('#first').change(function() {
  if ($(this).prop('checked') == false) {
    $('#table2 input[type="checkbox"]').prop('checked', false);
  }
});

检查表2中的任何内容后检查第一个框：

$('#table2 input[type="checkbox"]').change(function() {
  if ($(this).prop('checked') == true) {
    $('#first').prop('checked', true);
  }
});

在这里小提琴：https://jsfiddle.net/166gv8tc/

Answer 2

这解决了您的问题：

// by checking first check/unchecks all
$('#first').change(function() {
  if ($(this).prop('checked') == true) {
    $('#table2 input[type="checkbox"]').prop('checked', true);
  } else if ($(this).prop('checked') == false) {
    $('#table2 input[type="checkbox"]').prop('checked', false);
  }
});

// if any checked check first
$('#table2 input[type="checkbox"]').change(function() {
    if ($(this).prop('checked') == true) {
        $('#first').prop('checked', true);
    }
});

// if all checked check first, if none checked uncheck first
$('#table2 input[type="checkbox"]').change(function() {
    var allchecked = true;
    $('#table2 input[type="checkbox"]').each(function () {
        console.log('check');
        if ($(this).prop('checked') == false) {
            allchecked = false;
        }
    }); 

    if (allchecked) {
        $('#first').prop('checked', true);
    } else {
        $('#first').prop('checked', false);
    }
});

小提琴：http://jsfiddle.net/ddan/go09n70n/1/

使用jQuery检查/取消选中表之间的框

2 个答案: