jquery checkbox全选与全不选

最新推荐文章于 2024-04-17 09:12:12 发布

原创最新推荐文章于 2024-04-17 09:12:12 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

本文介绍了一种使用jQuery实现网页中复选框全选和全不选的方法。通过点击按钮触发事件，利用each遍历所有指定名称的复选框，并通过检查当前状态来改变选中状态。

用jquery设置checkbox设置全选或者全不选，在网络上查找到大多数都是使用

$("checkbox").attr("checked",true);//设置全选

$("checkbox").removeAttr("checked");//设置全不选

但是我使用次方法之后第二次时候不能全选操作，后来查找应该这样

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
<HTML>   
 <HEAD>   
  <TITLE> New document．nbsp;</TITLE>   
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <SCRIPT LANGUAGE="javascript" src="jquery.js"></script>   
  <SCRIPT LANGUAGE="javascript">   
	$(document).ready(function(){
		//设置全选
		$("#btn1").click(function(){
			var check = $("input[name=checkbox]");
			check.each(function(){
				var ischeck = $(this).is(':checked');
				if(ischeck == false){
					$(this).click();
				}
			});
		});
		//设置全不选
		$("#btn2").click(function(){
			var check = $("input[name=checkbox]");
			check.each(function(){
				var ischeck = $(this).is(':checked');
				if(ischeck == true){
					$(this).click();
				}
			});
		});
	});
	
  </SCRIPT>   
     
 </HEAD>   
  
 <BODY>   
 <form name="form1" method="post" action="">   
   <input type="button" id="btn1" value="全选">   
   <input type="button" id="btn2" value="取消全选">   
   <br>   
   <input type="checkbox" name="checkbox" value="checkbox1">   
   checkbox1   
   <input type="checkbox" name="checkbox" value="checkbox2">   
   checkbox2   
   <input type="checkbox" name="checkbox" value="checkbox3">   
   checkbox3   
   <input type="checkbox" name="checkbox" value="checkbox4">   
   checkbox4   
   <input type="checkbox" name="checkbox" value="checkbox5">   
   checkbox5   
   <input type="checkbox" name="checkbox" value="checkbox6">   
   checkbox6   
   <input type="checkbox" name="checkbox" value="checkbox7">   
   checkbox7   
   <input type="checkbox" name="checkbox" value="checkbox8">   
 checkbox8   
 </form>

标签

#js #web