<!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>
时间： 2024-11-07 15:18:48