jquery实现全选、反选、取消全部等操作(复选框checkbox)

- 日理万妓 2021-07-24 20:32 467阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="gbk">
    <title>复选框的使用</title>
    <style type="text/css">
    </style>
    <script src="jquery-1.5.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    		//全选框添加点击事件
    		$("#checkAllChange").click(function(){
    					//全选框选择状态
    					var checkedFlag = this.checked;
    					//选择class="userid"的控件，并执行循环
    			 		$(".userid").each(function(){
    			 			//将当前控件的选择状态设置跟全选框的状态一样
    			 			 this.checked=checkedFlag;
    			 		});
    		});
    		//权限按钮添加点击事件
    		$("#checkAll").click(function(){
    				//将全选框的checked属性设置为true，也就是选中全选框
    				$("#checkAllChange").attr("checked",true);
    				//选择class="userid"的控件，让全部都选中
    				$(".userid").each(function(){
    			 			 this.checked=true;
    			 	});
    		});	
    		//取消全部按钮添加点击事件
    		$("#removeAll").click(function(){
    				//将全选框的checked属性设置为false，也就是不选中全选框
    				$("#checkAllChange").attr("checked",false);
    				//选择class="userid"的控件，设置全部都不选中
    				$(".userid").each(function(){
    			 			 this.checked=false;
    			 	});
    		});	
    		//反选按钮添加点击事件
    		$("#reverse").click(function(){
    				//选择class="userid"的控件
    				$(".userid").each(function(){
    						 //当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。
    			 			 if(this.checked==true){
    			 			 		this.checked=false;
    			 			 }else{
    			 			 		this.checked=true;
    			 			 }
    			 			 //this.checked = !this.checked;//这行是更为简洁的写法
    			 	});
    			 	//处理全选按钮
    			 	dealAllCheck();
    			 	
    		});	
    		//批量删除按钮添加点击事件
    		$("#batchDel").click(function(){
    				$(".userid").each(function(i){
    		 			 if(this.checked==true){
    		 			 		/*$(this) 的到的input
    		 			 		  $(this).parent()是父节点td
    		 			 		  $(this).parent().parent()是祖父节点tr
    		 			 		  然后remove 祖父节点TR即可
    		 			 		*/
    		 			 		$(this).parent().parent().remove();
    		 			 }
    			 	});
    		});
    		
    		//给每一个class="userid"的控件添加一个点击事件
    		$(".userid").click(function(){
    			dealAllCheck();
    		})
    		
    		function dealAllCheck(){
    			var allCheckedFlag = true;//默认为选中
    			$(".userid").each(function(){
    				if(!this.checked){//一旦有一个未选中，则全选按钮 设置不选中
    					allCheckedFlag = false;
    				}
    			})
    			$("#checkAllChange").attr("checked",allCheckedFlag);
    		}
    		
    })
    
    
    
    </script>
    </head>
    <body>
    <table border="1">
      <tr>
        <td><input type="checkbox" id="checkAllChange" /></td>
        <td>用户id</td>
        <td>用户名</td>
        <td>电话</td>
        <td>地址</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="userid" value="1" /></td>
        <td>1</td>
        <td>张三</td>
        <td>13970040940</td>
        <td>北京</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="userid" value="2" /></td>
        <td>2</td>
        <td>李四</td>
        <td>18809876543</td>
        <td>上海</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="userid" value="3" /></td>
        <td>3</td>
        <td>王五</td>
        <td>13767857733</td>
        <td>河南</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="userid" value="4" /></td>
        <td>4</td>
        <td>旺财</td>
        <td>13398768546</td>
        <td>江西</td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" id="checkAll" value="全选" /></td>
        <td><input type="button" id="removeAll" value="取消全部" /></td>
        <td><input type="button" id="reverse" value="反选" /></td>
      </tr>
      <tr>
        <td colspan="4" align="center"><input type="button" value="批量删除" id="batchDel"></td>
      </tr>
    </table>
    </body>
    </html>

### **代码中有比较详细的注释，欢迎点赞！** ###