Question

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

这是我想用Javascript完成的：

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

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

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

伪代码的想法：

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

OR

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

第二种选择似乎更乏味。第一次工作会不会？

Answer 1

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

Demo

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');
});

A fiddle

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

2 个答案: