复选框的使用
前几天在网上看到好多有关复选框的文章，看了好几篇发觉都是转载的几乎全部都是出自一篇文章，转载也就算了，运行了一下代码还是错的。自己都不去验证下就拿出来转载，真的是害人不浅啊，因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。
1.常见的复选框操作
（1）全选 （2）全不选 （3）反选 （4）复选框取值
2.开发的准备
（1） 代码编辑器 （2）jquery开发库
3.页面设计，这里就简单的弄两组复选框好了，代码如下
爱好: <input type="checkbox" name="interest" value="1"/>唱歌 <input type="checkbox" name="interest" value="2"/>跳舞 <input type="checkbox" name="interest" value="1"/>跑步 <input type="button" id="yes" value="全选"/> <input type="button" id="no" value="全不选"/> <input type="button" id="reverse" value="反选"/> <br><br> 城市: <input type="checkbox" name="city" value="1"/>上海 <input type="checkbox" name="city" value="2"/>嘉兴 <input type="checkbox" name="city" value="3"/>杭州 <input type="button" id="submit" value="提交城市"/>
4.全选和全不选，这样的操作只需要设置复选框的属性checked为true或false就OK了
$("#yes").click(function(){
$('[name=interest]:checkbox').attr('checked',true);
});
$("#no").click(function(){
$('[name=interest]:checkbox').attr('checked',false);
});
5.反选操作，就是说没选中的变为选中，选中的则取消选中
$("#reverse").click(function(){
$('[name=interest]:checkbox').each(
function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;
}
);
});
6.取值操作，这里先判断如果用户没有选中任何的选项则给出提示
怎样判断用户有没有选中复选框呢，个人觉得只要判断被选中的个数就好了，如果被选中的个数为0则表示没有选择任何的复选框。取值的话就用each循环取出来就OK了。
$("#submit").click(function(){
if($('[name=city]:checkbox:checked').length==0){
alert("至少要选择一个城市");
return false;
}else{
$('[name=city]:checkbox:checked').each(function(){
alert($(this).val());
});
}
});
到这里复选框的操作就差不多没了，代码我就不上传到资源里了。我把代码全部贴出来给大家吧
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery17.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#yes").click(function(){
$('[name=interest]:checkbox').attr('checked',true);
});
$("#no").click(function(){
$('[name=interest]:checkbox').attr('checked',false);
});
$("#reverse").click(function(){
$('[name=interest]:checkbox').each(
function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;
}
);
});
$("#submit").click(function(){
if($('[name=city]:checkbox:checked').length==0){
alert("至少要选择一个城市");
return false;
}else{
$('[name=city]:checkbox:checked').each(function(){
alert($(this).val());
});
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框的使用</title>
</head>
<body>
爱好:
<input type="checkbox" name="interest" value="1"/>唱歌
<input type="checkbox" name="interest" value="2"/>跳舞
<input type="checkbox" name="interest" value="1"/>跑步
<input type="button" id="yes" value="全选"/>
<input type="button" id="no" value="全不选"/>
<input type="button" id="reverse" value="反选"/>
<br><br>
城市:
<input type="checkbox" name="city" value="1"/>上海
<input type="checkbox" name="city" value="2"/>嘉兴
<input type="checkbox" name="city" value="3"/>杭州
<input type="button" id="submit" value="提交城市"/>
</body>
</html>
下面是运行效果图，我用好多个浏览器测试过了。代码没有任何的问题。如果有写错的地方欢迎大家拍砖。
