写项目时遇到一个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);
}
分享到:
相关推荐
js实现checkbox 全选和取消 自己亲测可以使用
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
Recyclerview item上CheckBox,包括全选,取消全选,单选功能
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法:
简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
js checkbox全选 反选 取消全部设置表单html复选框
checkbox.html 博文链接:https://crazymud.iteye.com/blog/426702
JQuery实现checkbox的全选取消全选
listview带checkbox全选、取消功能精简版
listview带checkbox全选、取消功能
android checkbox全选反选
Checkbox全选反选.html
CheckBox全选与否,及删除问题
DevExpress 实现checkbox全选效果,内有主要代码,虽不能直接运行,但是都有详细的注释说明
flex Datagrid checkbox全选 Datagrid
1、vue+elementui实现select下拉框增加checkbox并可全选或取消; 2、完整的代码示例; 3、清晰的示例图片
高级控件(datagridview等)中加入checkbox实现全选和反选经典例子
android ListView中的checkBox全选和反选Demo