js/jQuery實現(xiàn)全選效果

更新時間：2019年06月17日 14:36:14 作者：vince_26321

這篇文章主要為大家詳細介紹了js/jQuery兩種代碼實現(xiàn)全選效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js/jQuery兩種代碼實現(xiàn)全選效果的具體代碼，供大家參考，具體內(nèi)容如下

注意點

在獲取子選框的時候別加上全選框的個數(shù)了

技巧

找 tbody 下面的input標簽就可以

jq文件夾自己下載即可

思路

var all=my$("j_tb").getElementsByTagName("input");
 // alert(all.length);
 //實現(xiàn)1 點擊全選 子選框都得被全選
 
 /**
 * 
 * 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設(shè)置所有子選框的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;
 } 
 }
 }
 //實現(xiàn)2 選擇所有的子選框 全選框勾選
 var arr=[];
 for(var i=0;i<all.length;i++)
 {
 all[i].onclick=function(){
  //思路過程
  /** 
  * 創(chuàng)建數(shù)組
  * 點擊每個子選框 
  * 1.數(shù)組清零
  * 2.fou循環(huán)所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數(shù)組(arr.push(all[i]))里面
  * 3.判斷新的數(shù)組長度是否等于子選框數(shù)組長度 是的話 全選框被選中（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ù)自己來判斷是否全選與否
 });
 
 $("#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);
 //實現(xiàn)1 點擊全選 子選框都得被全選
 
 /**
 * 
 * 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設(shè)置所有子選框的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;
 } 
 }
 }
 //實現(xiàn)2 選擇所有的子選框 全選框勾選
 var arr=[];
 for(var i=0;i<all.length;i++)
 {
 all[i].onclick=function(){
  //思路過程
  /** 
  * 創(chuàng)建數(shù)組
  * 點擊每個子選框 
  * 1.數(shù)組清零
  * 2.fou循環(huán)所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數(shù)組(arr.push(all[i]))里面
  * 3.判斷新的數(shù)組長度是否等于子選框數(shù)組長度 是的話 全選框被選中（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ù)自己來判斷是否全選與否
 });
 
 $("#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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: