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

Unchecking a Checkbox will uncheck other checkboxes in a table

本文关键字：取消 复选框 其他      更新时间：2023-09-26

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

这就是我想用Javascript完成的：

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

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

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

伪代码思想：

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

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

Pure 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;
        }
    }
}

你可以试试这个：

jQuery

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

小提琴

相关文章：