前几天在网上看到好多有关复选框的文章,看了好几篇发觉都是转载的几乎全部都是出自一篇文章,转载也就算了,运行了一下代码还是错的。自己都不去验证下就拿出来转载,真的是害人不浅啊,因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。
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>
下面是运行效果图,我用好多个浏览器测试过了。代码没有任何的问题。如果有写错的地方欢迎大家拍砖。