js/jQuery实现全选效果

2024-05-06 16:52:20

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js/jQuery两种代码实现全选效果的具体代码，供大家参考，具体内容如下

注意点

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

技巧

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：通过说明与示例了解js五种设计模式

下一篇：简单了解Javscript中兄弟ifream的方法调用