用js jquery 的方法实现全选/全不选;
1.html代码:
<label for="all" id="labelall">全选</label>
<input type="checkbox" id="all">
<ul id="ul">
<li>
<label for="all">手机</label>
<input type="checkbox" >
</li>
<li>
<label for="all">电脑</label>
<input type="checkbox" >
</li>
<li>
<label for="all">平板</label>
<input type="checkbox" >
</li>
<li>
<label for="all">相机</label>
<input type="checkbox" >
</li>
</ul>
2.js代码
// 当 全选 checkbox 改变时 (change事件) 获取 checked 值 --(prop)
$("#all").change(function(){
var allVal= $(this).prop("checked") ;// true /false
$("#ul :checkbox").prop("checked",allVal)
// allVal ? $("#labelall").text("全不选"): $("#labelall").text("全选")
$("#labelall").text( allVal ? "全不选" : "全选" );
})
$("#ul :checkbox").change(function(){
// console.log(this);
//比较选中多选框的数量和多选框的数量;
//$("#ul :checked").length 选中的个数; $("#ul :checkbox").length 复选框个数
if( $("#ul :checked").length == $("#ul :checkbox").length ){
$("#all").prop("checked",true);
//全选是显示全不选
$("#labelall").text( "全不选" );
}else{
$("#all").prop("checked",false);
//没有选择时显示 全选
$("#labelall").text( "全选" );
}
})