<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<script src="dist/jquery.js" type="text/javascript"></script> ???????<title>田林哥哥选择框练习</title> ???????<script type="text/javascript"> ???????????????????????//让全选框影响子框的方法 ???????????$(function(){ ???????????????//拿到所有类名为all的，绑定一个点击事件 ???????????????$(".all").bind("click",function(){ ???????????????????//拿到当前对象的name属性， ???????????????????var name = $(this).prop("name"); ???????????????????//如果当前全选框处于被选择状态 ?有checked属性 ???????????????????if ($(this).prop("checked")) { ???????????????????????//那就让类名和当前name相同的选择框都变成选择状态 ???????????????????????$("."+name).prop("checked","tl"); ???????????????????} else{ ???????????????????????//如果全选框处于为未被选中状态，那他的儿子们，都要移除掉checked ???????????????????????$("."+name).removeProp("checked"); ???????????????????} ???????????????}) ???????????????????????????????//让子框影响全选框的方法 ???????????$(".hobby,.star,.girl").bind("click",function(){ ???????????????//是否所有子框都被选中了？初始值为 真 ???????????????var isChecked = true; ???????????????//拿到所有跟当前类名相同的子框，进行遍历 ???????????????$("."+this.className).each(function(){ ???????????????????//只要有一个子框是未选中状态，那就让isChecked为假 ???????????????????if(!$(this).prop("checked")){ ???????????????????????isChecked = false; ???????????????????} ???????????????}) ???????????????//遍历完毕，判断isChecked,为真则说明所以子框都被选中，那就选中全选框 ???????????????if(isChecked) ???????????????????$("[name=‘"+this.className+"‘]").prop("checked","tl"); ???????????????else//否则就让全选框处于未选中状态 ???????????????????$("[name=‘"+this.className+"‘]").removeProp("checked"); ???????????}) ???????????}) ???????????????????????????????</script> ???</head> ???<body> ???????<h1>你的爱好</h1> ???????全选<input type="checkbox" class="all" name="hobby"/><br /> ???????篮球<input type="checkbox" class="hobby" /> ???????足球<input type="checkbox" class="hobby" /> ???????台球<input type="checkbox" class="hobby" /> ???????网球<input type="checkbox" class="hobby" /> ???????球球大作战<input type="checkbox" class="hobby" /> ???????<hr> ???????<h1>你喜欢的明星</h1> ???????全选<input type="checkbox" class="all" ?name="star"/><br /> ???????刘德华<input type="checkbox" class="star" /> ???????迪丽热巴<input type="checkbox" class="star" /> ???????高圆圆<input type="checkbox" class="star" /> ???????李嘉欣<input type="checkbox" class="star" /> ???????周慧敏<input type="checkbox" class="star" /> ???????<hr> ???????<h1>受人敬仰的妹子</h1> ???????全选<input type="checkbox" class="all" ?name="girl"/><br /> ???????胡美晴<input type="checkbox" class="girl" /> ???????张菲莉<input type="checkbox" class="girl" /> ???????金嘉融<input type="checkbox" class="girl" /> ???????李若妍<input type="checkbox" class="girl" /> ???????任俊可<input type="checkbox" class="girl" /> ???</body></html>jquery 实现的全选demo
原文地址：http://www.cnblogs.com/shenjp/p/7477797.html