复选框的使用

最新推荐文章于 2022-07-17 12:53:30 发布

iteye_6233

最新推荐文章于 2022-07-17 12:53:30 发布

阅读量219

点赞数 1

文章标签： javascript ViewUI

前几天在网上看到好多有关复选框的文章，看了好几篇发觉都是转载的几乎全部都是出自一篇文章，转载也就算了，运行了一下代码还是错的。自己都不去验证下就拿出来转载，真的是害人不浅啊，因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。

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>

下面是运行效果图，我用好多个浏览器测试过了。代码没有任何的问题。如果有写错的地方欢迎大家拍砖。

iteye_6233

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复选框的使用

前几天在网上看到好多有关复选框的文章，看了好几篇发觉都是转载的几乎全部都是出自一篇文章，转载也就算了，运行了一下代码还是错的。自己都不去验证下就拿出来转载，真的是害人不浅啊，因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。1.常见的复选框操作（1）全选（2）全不选（3）反选（4）复选框取值2.开发的准备（1）代码编辑器（2）jquery开发库 3.页面设...
复制链接

扫一扫