Function realization:
- Click select all, check the following items, check all or cancel all; (select all check works on sub-check items)
- If the following check items are checked, all of them are checked, and all check items are checked; (the sub-check items are reversed to check all check items)
- If the following check items are not all checked, the check status of all check items is removed; (the sub-check items react to all check items)
Take a look at the screenshots first.
js is as follows:
- Define it as a public function for objects that need the same function; (Object-oriented, object class is an excellent programming idea, and the process-oriented programming method should be gradually changed.)
- Changing properties is best to use prop
- Special Note: In order to make the code more complete, this js specially considers: the reaction of the check item to the check all selection. The judgment condition is to compare the item in the selected state with all items ,
- When setting the checkbox, prop has better compatibility than attr ;
- In setting checked, "checked" mode is not recommended. Better compatibility is checked, true , which clearly indicates that the value of checked is a boolean value in w3c.
$(function(){
//全选与否
function checkall(obj){
obj.click(function(){
if(obj.is(':checked')){
$(this).parent().next().find(":checkbox").prop("checked", true);
}
else{
$(this).parent().next().find(":checkbox").prop("checked", false);
}
});
//子项反向作用到全选状态
var checkInSpan = obj.parent().next().find(":checkbox");
checkInSpan.click(function(){
var checkNum = obj.parent().next().find(":checkbox").length;
var checkedNum = obj.parent().next().find("input:checked").length;
if(checkedNum < checkNum){
obj.prop("checked", false);
};
if(checkedNum == checkNum){
obj.prop("checked", true);
}
})
};
//函数调用-服务类型
var serviceTypeAll = $("#serviceTypeAll");
checkall(serviceTypeAll);
//函数调用-门店
var storeAll = $("#storeAll");
checkall(storeAll);
})html is as follows:
<div class="row">
<div class="col-md-2 otoc-textright otoc-p-t-15">服务类型：</div>
<div class="col-md-10 otoc-p-t-10">
<div class="md-checkbox-inline">
<div class="md-checkbox">
<input type="checkbox" id="serviceTypeAll" class="md-check" >
<label for="serviceTypeAll">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>全部
</label>
</div>
<span> <!--包含子check项的容器-->
<div class="md-checkbox">
<input type="checkbox" id="service01" class="md-check" >
<label for="service01">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>保养
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service02" class="md-check">
<label for="service02">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>洗车
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service03" class="md-check">
<label for="service03">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>维修
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service04" class="md-check">
<label for="service04">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>美容
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service05" class="md-check">
<label for="service05">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>事故
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service06" class="md-check">
<label for="service06">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>钣喷
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service07" class="md-check">
<label for="service07">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>轮胎
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="service08" class="md-check">
<label for="service08">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>其他
</label>
</div>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 otoc-textright otoc-p-t-15">门店：</div>
<div class="col-md-10 otoc-p-t-10">
<div class="md-checkbox-inline">
<div class="md-checkbox">
<input type="checkbox" id="storeAll" class="md-check" >
<label for="storeAll">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>全部
</label>
</div>
<span>
<div class="md-checkbox">
<input type="checkbox" id="store01" class="md-check" >
<label for="store01">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>氧车乐金水路店
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="store02" class="md-check" >
<label for="store02">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>氧车乐车源店
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="store03" class="md-check" >
<label for="store03">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>氧车乐西店店
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="store04" class="md-check" >
<label for="store04">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>氧车乐梅林店
</label>
</div>
<div class="md-checkbox">
<input type="checkbox" id="store05" class="md-check" >
<label for="store05">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span>氧车乐锐骑店
</label>
</div>
</span>
</div>
</div>
</div>Extended topic: not affected by the dom layout structure of the page
The disadvantages of the above js code in this example , although the function of all selection/reverse selection can be realized, but the DOM structure must be strictly followed, so that js can successfully find the corresponding node to operate.
The completed js code is as follows:
//2个参数---不受页面dom结构的变化影响
//参数说明：
//obj : 为全选check;
//objChildren: 为包含子checkbox的容器
function otoc_checkall(obj,objChildren){
obj.click(function(){
if(obj.is(':checked')){
objChildren.find(":checkbox").prop("checked", true);
}
else{
objChildren.find(":checkbox").prop("checked", false);
}
});
//子项反向作用到全选状态
var objChildren_all = objChildren.find(":checkbox");
objChildren_all.click(function(){
var checkNum = objChildren.find(":checkbox").length;
var checkedNum = objChildren.find("input:checked").length;
if(checkedNum < checkNum){
obj.prop("checked", false);
};
if(checkedNum == checkNum){
obj.prop("checked", true);
}
})
};
//引用
var serviceTypeAll = $("#serviceTypeAll");
var serviceTypeAll_children = $("#serviceTypeAll_children");
otoc_checkall(serviceTypeAll,serviceTypeAll_children);