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

最新推荐文章于 2023-05-24 12:38:44 发布

编程界小明哥

最新推荐文章于 2023-05-24 12:38:44 发布

阅读量871

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dkm123456/article/details/110792086

版权

jquery 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<!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>

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

编程界小明哥

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery实现全选、反选、取消全部等操作(复选框checkbox)

<!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).
复制链接

扫一扫