javascript - 取消选中复选框将取消选中表格中的其他复选框

Question

我在这里使用基本table的 HTML 和input复选框字段。

这就是我想用 Javascript 完成的：

表格的第二列有一个复选框。第三列包含第二列的“子选项”。每一行都是独立的。

如果我取消选择<td>第 2 列中的复选框，我想取消选择<td>直接右侧的所有复选框（第 3 列中的子选项）。

我也想做相反的事情；如果您选择第一个复选框，它将检查子选项中未选中的所有选项。

伪代码思路：

if checkbox checked:
  uncheck child input's in td `id`

或者

if checkbox checked:
   uncheck <check box one `id'>
   uncheck <check box two `id'>
   uncheck <check box three `id'>
   etc

第二种选择似乎更乏味。第一个会起作用吗？

Answer 1

纯 Javascript 解决方案（没有标记框架）。

演示

var table = document.getElementById("mytable");
var checkbox;

for(var i=0; i<table.rows.length; i++){
    checkbox = table.rows[i].cells[1].getElementsByTagName("input")[0];
    checkbox.onchange = function(){
        var others = this.parentNode.parentNode.cells[2].getElementsByTagName("input");
        for(var j=0; j<others.length; j++){
            others[j].checked = this.checked;
        }
    }
}

Answer 2

你可以试试这个：

jQuery

$('#checkall:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});

一把小提琴