使用jquery对复选框进行全选/反选

最新推荐文章于 2023-05-25 08:32:18 发布

qq312142

最新推荐文章于 2023-05-25 08:32:18 发布

阅读量960

点赞数 1

分类专栏： jquery 文章标签： jquery 复选框

本文链接：https://blog.csdn.net/qq312142/article/details/51453784

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看一下结构

<span style="color:#3333ff;">  <body>
    <div>
    	<form action="" method="post">
    		<table>
    		
    			<tr><td>全选/全不选<input type="checkbox" class="select" /></td><td>姓名</td></tr>
    			<tr><td>选项 1：           <input type="checkbox"/></td><td>张3</td></tr>
    			<tr><td>选项 2：            <input type="checkbox"/></td><td>张4</td></tr>
    			<tr><td>选项 3：            <input type="checkbox"/></td><td>张5</td></tr>
    			<tr><td>选项 4：            <input type="checkbox"/></td><td>张6</td></tr>
    			<tr><td>选项 5：            <input type="checkbox"/></td><td>张7</td></tr>
    		
    		</table>
    </form>
    </div>
  </body></span>

然后是js代码(记得引用jq文件)

<span style="color:#3333ff;"><script type="text/javascript">
		$(function(){
			// 全选/全不选事件
			$(".select").click(function(){
				$("input:checkbox").attr("checked",this.checked);
			
			});
			
			//声明个标识变量 随便给个默认值
			var c = true;
			
			//如果点下面对应的复选框时 根据情况判断是否勾选第一个
			//(假如第一次选择了全选，然后又把下面复选框里对勾取消了，那么全选复选框中的对勾也应该取消

<span style="white-space:pre">			</span>//下图选项2没有被勾选，所以全选也没有被勾选


			$("input:checkbox:gt(0)").click(function(){
				//循环遍历选项看看是否都勾选了
				$("input:checkbox:gt(0)").each(function(i){
					//如果有 没有勾选的选项就把标识变量赋成false然后跳出循环
					if(this.checked==false){
						c = false;
						return false;
					}else{
						c=true;
					}
				
				});	
				//选项中如果有一个没勾选 ，全选复选框的对勾就会取消，反之选项中全部勾选，全选复选框也会被选中
				$(".select").attr("checked",c);
			});
			
		});
</script></span>

最后放张效果图