checkbox全选和取消全选(100%可以全选和取消全选)

时间:2022-04-07 19:40:18

写项目时遇到一个checkbox全选和反选的功能,在网上找找,很多全选的方法,

也确实有用,不过,反选的试了半天,还是有问题--页面加载子选项全选时

(父选项也是选中状态),取消父选项选中状态,子选项没反应!!!郁闷了半天...

最后,发现一种方法,可以实现,大家一起分享哈吧。。。

可能还有很多其他的实现方法,希望大家也能共享出来,一起看看,嘿嘿,

写的不好,大家见谅哈,js并不是太精通!


<input type="checkbox" id="all" onclick="selectAll(this.checked)">全选


<input type="checkbox" onclick="oneCheck('all')">子节点1

<input type="checkbox" onclick="oneCheck('all')">子节点2

<input type="checkbox" onclick="oneCheck('all')">子节点3

<input type="checkbox" onclick="oneCheck('all')">子节点4

<input type="checkbox" onclick="oneCheck('all')">子节点5

<input type="checkbox" onclick="oneCheck('all')">子节点6


//全选

//flag : 父选项此时的状态(选中还是不选中,这个也是其他方法难以做到的,通常会

用$("#all").attr("checked") == "checked"来判断,我试了,不管父选项选中与否,

都返回checked,不知道有没有大神遇到过,用this.checked就不会,会明确的

返回true/false,就可以判断父选项此时的状态,方便操作子选项了!!!)

function selectAll(flag){

if (flag){

$("input[type=checkbox]:gt(0)").attr("checked", "checked");

} else {

$("input[type=checkbox]:gt(0)").removeAttr("checked");

}

}


//这个方法是网上找的,没有问题

//子节点

function oneCheck(id){

var $subBox = $("input[type=checkbox]:gt(0)");

$("#"+id).attr("checked",$subBox.length == $("input[type=checkbox]:gt(0)").length ? true : false);

}