2.全选框取消 子选框 全部取消
3.全选框选中 子选框部分取消 全选框取消
4.子选框全部选中 全选框选中
<div>
<div><input type="checkbox" class="J_checkAll" id="idAll"><span>全选</span></div>
</div>
<div id="id">
<ul>
<li class="choice"><input class="J_check" type="checkbox" name="id" value="">苹果</li>
<li class="choice"><input class="J_check" type="checkbox" name="id" value="">香蕉</li>
<li class="choice"><input class="J_check" type="checkbox" name="id" value="">荔枝</li>
<li class="choice"><input class="J_check" type="checkbox" name="id" value="">西瓜</li>
</ul>
</div>
<div>
<div><input type="checkbox" class="J_checkAll" id="sdAll"><span>全选</span></div>
</div>
<div id="sd">
<ul>
<li class="choice"><input class="J_check" type="checkbox" name="sd" value="">苹果</li>
<li class="choice"><input class="J_check" type="checkbox" name="sd" value="">小米</li>
<li class="choice"><input class="J_check" type="checkbox" name="sd" value="">三星</li>
<li class="choice"><input class="J_check" type="checkbox" name="sd" value="">华为</li>
</ul>
</div>全选的id命名 是以子选框的name 的 值 + All
子选框的 父级 的父级 <div id="sd"> 的id 等于 子选框的name 的 值<script src="jquery.min.js"></script>
<script>
$(function(){
$(".J_checkAll").click(function(){
var name = this.id.substring(0,this.id.length-3);
if(this.checked){
$("#"+name).find("input[name='"+name+"']").each(function(){this.checked=true;});
}else{
$("#"+name).find("input[name='"+name+"']").each(function(){this.checked=false;});
}
});
$(".J_check").click(function() {
var name = $(this).parents().parents().parents().attr('id');
var list = document.getElementsByClassName("J_checkAll");
for(var i=0;i<list.length;i++){
if(list[i].id == name+"All"){
list[i].checked=($("#"+name).find("input[name='"+name+"']").length == $("#"+name).find("input[name='"+name+ "']:checked").length ? true : false);
}
}
});
});
</script>
全选.rar
( 32.4 KB 下载：87 次 )
