jQuery实现全选与全部选
Posted lvxisha
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现全选与全部选相关的知识，希望对你有一定的参考价值。
为了便于用户理解，直接粘贴下面的代码即可
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="../css/font-awname.css"> 7 <style> 8 * 9 margin: 0; 10 padding:0; 11 list-style: none; 12 13 .boxs 14 margin: 20px 0 10px 20px; 15 16 /*导出文件*/ 17 #downLoad 18 width:90px; 19 height: 30px; 20 background-color: #3aa1ff; 21 color: #fff; 22 text-align: center; 23 line-height: 30px; 24 cursor: pointer; 25 26 /*方法二方式*/ 27 .waysTwo 28 margin-top: 20px; 29 30 .waysTwo li 31 width: 20px; 32 height: 20px; 33 border: 1px solid #ccc; 34 margin-top: 5px; 35 color: #fff; 36 37 .waysTwo li:hover 38 border-color:#3aa1ff; 39 40 .boxBg 41 border: 1px solid #3aa1ff; 42 background: #3aa1ff; 43 color: #fff; 44 45 </style> 46 </head> 47 <body> 48 <div class="boxs"> 49 <div id="downLoad"><i class="fa fa-upload" aria-hidden="true"></i>批量导出</div> 50 <h3>全选与全不选方法二:</h3> 51 <div class=‘waysOne‘> 52 <!-- 全选与全不选方法一 --> 53 <ul id="main-demo"> 54 <li ><input type="checkbox" id="sellectAll" name="sellectAll" title="写作" lay-skin="primary" >标题</li> 55 </ul> 56 <ul class="main-demo"> 57 <li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary"></li> 58 <li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary" ></li> 59 </ul> 60 </div> 61 <hr> 62 <h3>全选与全不选方法二:</h3> 63 <!-- 全选与全不选方法二 --> 64 <div class="waysTwo"> 65 <ul> 66 <li class="palyer-tit-check"> 67 <i class="fa fa-check"></i> 68 </li> 69 </ul> 70 <ul> 71 <li class="palyer-table-check"> 72 <i class="fa fa-check"></i> 73 </li> 74 <li class="palyer-table-check"> 75 <i class="fa fa-check"></i> 76 </li> 77 <li class="palyer-table-check"> 78 <i class="fa fa-check"></i> 79 </li> 80 </ul> 81 </div> 82 </div> 83 </body> 84 <script src="../js/jquery.js"></script> 85 <script> 86 /*input绑定属性时注意事项： 87 给input绑定checked属性时不能用attr()方法，绑定不成功； 88 prop()可以绑定checked事件，打印的checked值为boolean值，绑定成功为true,反之，为false 89 */ 90 //头部-全选 91 $(document).on(‘click‘, ‘#sellectAll‘, function() 92 var checkedOfAll=$("#sellectAll").prop("checked"); 93 // alert(checkedOfAll); 94 $("input[name=‘selectBox‘]").prop("checked", checkedOfAll); 95 ); 96 //列表-单选 97 $(document).on(‘click‘, ‘.selectBox‘, function() 98 var ths = $(this); 99 if (ths.checked == false) 100 $("input[name=sellectAll]:checkbox").prop(‘checked‘, false); 101 102 else 103 var count = $("input[name=‘selectBox‘]:checkbox:checked").length; 104 if (count == $("input[name=‘selectBox‘]:checkbox").length) 105 $("input[name=sellectAll]:checkbox").prop("checked", true); 106 else 107 $("input[name=sellectAll]:checkbox").prop("checked", false); 108 109 110 ); 111 112 // 方法二 113 //顶部-全选按钮 114 var titCheck = $(‘.palyer-tit-check‘); 115 var tableCheck = $(‘.palyer-table-check‘); 116 titCheck.on(‘click‘, function() 117 if($(this).hasClass(‘boxBg‘)) 118 $(this).removeClass(‘boxBg‘); 119 tableCheck.removeClass(‘boxBg‘); 120 return false; 121 122 $(this).addClass(‘boxBg‘); 123 tableCheck.addClass(‘boxBg‘); 124 ); 125 126 //列表-单选按钮 127 console.log(tableCheck.length); 128 tableCheck.on(‘click‘, function() 129 if($(this).hasClass(‘boxBg‘)) 130 $(this).removeClass(‘boxBg‘); 131 return false; 132 133 $(this).addClass(‘boxBg‘); 134 ); 135 136 /*批量导出*/ 137 $(document).on(‘click‘, ‘#downLoad‘, function() 138 if (titCheck.hasClass(‘boxBg‘) || tableCheck.hasClass(‘boxBg‘)) 139 //下载执行的事件 140 141 ); 142 </script> 143 </html>
以上是关于jQuery实现全选与全部选的主要内容，如果未能解决你的问题，请参考以下文章