写项目时遇到一个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);
}