标签：
下面是自己写的一个全选和全不选的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>投放场所</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
.cf:before,.cf:after{content:" ";display:table}
.cf:before,.cf:after{clear:both}
.cf{*zoom:1}
.fl{float:left;}
input{border:none;outline:none;}
.put-place a{display:block;height:30px;line-height:30px;color:#333;text-decoration:none;width:200px;cursor:default;}
.put-place{border:1px solid #666;border-radius:5px;}
</style>
</head>
<body>
<!-----table------>
<div class="put-box cf">
<div class="put-place fl">
<div class="switch-all">
<a href="javascript:void(0)"><label><input type="checkbox" autocomplete="off" /><span>全选</span></label></a>
</div>
<div class="switch-cell cf">
<div class="fl">
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off" /><span>餐饮</span></label></a>
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off" /><span>餐饮</span></label></a>
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off" /><span>餐饮</span></label></a>
</div>
<div class="fl">
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off" /><span>餐饮</span></label></a>
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off"/><span>餐饮</span></label></a>
<a href="javascript:void(0)"><label><input type="checkbox" value="餐饮" autocomplete="off"/><span>餐饮</span></label></a>
</div>
</div>
</div>
</div>
<script>
$(".switch-all label").click(function(){
var input=$(".switch-cell").find("input");
//alert($(this).find("input").prop("checked"))
if($(this).find("input").is(":checked")){//方法一：用is(":checked")判断
for(var i=0,m=input.length;i<m;i++){
if(input[i].checked==false){
input[i].checked=true;
}
}
}else{
for(var i=0,m=input.length;i<m;i++){
if(input[i].checked==true){
input[i].checked=false;
}
}
}
/*
if($(this).find("input").attr("checked")){//方法二：用attr("checked")或者prop("checked")判断
alert(1)
}else{alert(2)}*/
/*
var input=$(".switch-cell").find("input");
if($(this).find("input")[0].checked==true){ //方法三：用原生js方法判断
for(var i=0,m=input.length;i<m;i++){
if(input[i].checked==false){
input[i].checked=true;
}
}
}else{
for(var i=0,m=input.length;i<m;i++){
if(input[i].checked==true){
input[i].checked=false;
}
}
}*/
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lipei/p/4424356.html
