关于父元素选中子元素全部选中
来源:互联网 发布:2015美工电脑配置 编辑:程序博客网 时间:2024/06/05 13:24
首先声明这个全选按钮我用的mui框架里的;所以要用这段代码需要吧全选改改
直接代码js代码
var arr = document.querySelectorAll('input[type="checkbox"]');
document.querySelector('.mui-switch-mini').addEventListener('toggle', function(event) {
console.log(event.detail.isActive);
if(event.detail.isActive) {
//此段代码控制样式
for(var i = 0; i < arr.length; i++) {
arr[i].checked = true;
}
//此段代码修改值,用于之后判断选中的checkbox
$(".mui-checkbox input").each(function() {
$(this).attr("checked", true);
});
} else {
for(var i = 0; i < arr.length; i++) {
arr[i].checked = false;
}
$(".mui-checkbox input").each(function() {
$(this).attr("checked", false);
});
}
});
for(var i = 0; i < arr.length; i++) {
arr[i].onclick = function() {
if(!this.checked) {
// $('.mui-switch-mini').removeClass('mui-active')
}
var flag = true;
for(var i = 0; i < arr.length; i++) {
if(!arr[i].checked) {
flag = false;
break;
}
}
if(flag) {
$('.mui-switch-mini').addClass('mui-active')
}
};
}
<div id="list">
<h4>区域选择</h4><div class="mui-content-padded seton">
<span class="setall">全选</span>
<div id="mySwitch" class="mui-switch mui-switch-mini ">
<div class="mui-switch-handle"></div>
</div>
</div>
<ul>
<li><span>A站点</span><input name="subBox" type="checkbox" class="inp" id="inp" value="101" /></li>
<li><span>B站点</span><input name="subBox" type="checkbox" class="inp1" value="102" /></li>
<li><span>C站点</span><input name="subBox" type="checkbox" class="inp2" value="103" /></li>
</ul>
<button class="mui-btn mui-btn-block mui-btn-primary sys-btn-save" id="sure">确定</button>
<button class="mui-icon mui-icon-refresh mui-btn mui-btn-block mui-btn-primary sys-btn-save" id="refresh">刷新</button>
</div>
- 关于父元素选中子元素全部选中
- 关于JQ选中元素
- EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中
- Revit开发选中元素
- dom02基础子元素下拉列表随机选中
- Jquery 同辈元素选中/未选中效果
- 鼠标经过选中元素内容
- css选中子元素中不是第一个元素的3种方法
- javascrip实现:若选中TreeView的父节点checkbox,则其子节点全部选中
- 建一颗含有checkbox的树并且选中父节点,其子结点也全部被选中
- extjs 关于 treePanel + chekBox 全部选中 以及 清空选中
- 阻止元素被选中及清除选中的方法
- 阻止元素被选中及清除选中的方法
- CheckBox 选中效果 选中子自动选中父
- jquery选中以什么开头的元素
- listbox选中元素的背景色
- jquery获取选中的checkbox元素
- 页面中,使元素不能被选中
- SDL移植到ARM-linux下
- 解密回声消除技术之一(理论篇)
- springmvc搭建框架时无法加载js或者css等文件
- OFBIZ FTL模板 中文乱码问题
- LinkedHashMap
- 关于父元素选中子元素全部选中
- Linux系统下编译C++文件初级
- websocket
- SVM算法原理
- 环信-(php)服务器端REST API
- 64_常用类_自动装箱和拆箱_缓存处理
- idea 报错:[2016-08-31 09:20:10,763] Artifact xxx:war exploded: Error during artifact deployment.
- 读(深入浅出ES6)系列笔记(一)
- 解密回声消除技术之二(应用篇)