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')
}
};
}

 

 

 

html代码

<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>