js/jQuery两种代码实现全选效果

最新推荐文章于 2020-05-05 15:09:39 发布

忽然呀

最新推荐文章于 2020-05-05 15:09:39 发布

阅读量980

点赞数 1

CC 4.0 BY-SA版权

文章标签： jq

本文链接：https://blog.youkuaiyun.com/javasvince/article/details/91396817

本文介绍了一种在网页中实现全选框与多个子选框联动的方法，通过JavaScript代码，当全选框被选中时，所有子选框也会被自动选中；反之，如果所有子选框都被选中，全选框也会自动勾选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意点
在获取子选框的时候别加上全选框的个数了

技巧

找 tbody 下面的input标签就可以

jq文件夹自己下载即可

思路

var all=my$("j_tb").getElementsByTagName("input");
	// alert(all.length);
	//实现1  点击全选  子选框都得被全选
	
	/**
	 * 
	 * 点击全选框  判断全选框的checked是否为真  为真   遍历所有子选框  设置所有子选框的checked=true;  true不用加""
	 *
	 * 
	 */
	my$("j_cbAll").onclick=function(){
		if(j_cbAll.checked)
		{
			for(var i=0;i<all.length;i++)
			{
				all[i].checked=true;
			}	
	  }
		else{
				for(var i=0;i<all.length;i++)
				{
					all[i].checked=false;
				}	
			}
		}
	//实现2  选择所有的子选框 全选框勾选
	var arr=[];
		for(var i=0;i<all.length;i++)
		{
			all[i].onclick=function(){
				 //思路过程
				 /** 
					* 创建数组
					* 点击每个子选框  
					* 1.数组清零
					* 2.fou循环所有自选框  判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
					* 3.判断新的数组长度是否等于子选框数组长度  是的话 全选框被选中（my$("j_cbAll").checked=true）  否则相反
					*/
				 arr=[];
				for(var i=0;i<all.length;i++)
					 if(all[i].checked)
					{
						arr.push(all[i]);
					}	
					
				
				console.log(arr.length);
				if(arr.length==all.length){
					my$("j_cbAll").checked=true;
				}
				else{
					my$("j_cbAll").checked=false;
				}
			}
		
		}
		
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
    });
  
    $("#j_tb input").click(function () {
  
      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }
  
    });
    
  });
</script>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
    
    </tbody>
  </table>
</div>

<script type="text/javascript">
	function my$(id)
	{
		return document.getElementById(id);
	}
	
	var all=my$("j_tb").getElementsByTagName("input");
	// alert(all.length);
	//实现1  点击全选  子选框都得被全选
	
	/**
	 * 
	 * 点击全选框  判断全选框的checked是否为真  为真   遍历所有子选框  设置所有子选框的checked=true;  true不用加""
	 *
	 * 
	 */
	my$("j_cbAll").onclick=function(){
		if(j_cbAll.checked)
		{
			for(var i=0;i<all.length;i++)
			{
				all[i].checked=true;
			}	
	  }
		else{
				for(var i=0;i<all.length;i++)
				{
					all[i].checked=false;
				}	
			}
		}
	//实现2  选择所有的子选框 全选框勾选
	var arr=[];
		for(var i=0;i<all.length;i++)
		{
			all[i].onclick=function(){
				 //思路过程
				 /** 
					* 创建数组
					* 点击每个子选框  
					* 1.数组清零
					* 2.fou循环所有自选框  判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
					* 3.判断新的数组长度是否等于子选框数组长度  是的话 全选框被选中（my$("j_cbAll").checked=true）  否则相反
					*/
				 arr=[];
				for(var i=0;i<all.length;i++)
					 if(all[i].checked)
					{
						arr.push(all[i]);
					}	
					
				
				console.log(arr.length);
				if(arr.length==all.length){
					my$("j_cbAll").checked=true;
				}
				else{
					my$("j_cbAll").checked=false;
				}
			}
		
		}
		
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
    });
  
    $("#j_tb input").click(function () {
  
      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }
  
    });
    
  });
</script>
 -->
</body>
</html>