1.全选框选中 子选框 全部选中
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 次 )

评论() 相关

收藏

赞

艾昵丝

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。