input 全选 jquery封装方法

最新推荐文章于 2020-06-24 10:30:05 发布

weixin_30596343

最新推荐文章于 2020-06-24 10:30:05 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/supershare/p/8591860.html

本文介绍了一种在HTML表格中实现全选功能的方法。通过使用JavaScript为表格头部的复选框添加点击事件，可以控制表格内所有子项的选中状态。此功能通过遍历并设置每个子项复选框的状态来实现。

HTML代码
 <table class="table table-striped">
     <thead>
     <tr>
         <th><input type="checkbox" class="selBtn"/></th>
     </tr>
     </thead>
     <tbody>
　　　　　<tr><td style="width: 5%"><input type="checkbox" class="s1"/></td></tr>
　</tbody>
 </table>
//封装之后的全选
window.onload=function(){
 //调用插件方法
 SelectPlugin('selBtn');
}
function SelectPlugin(classname){

 var objs=document.getElementsByClassName(classname);
 for (var i = 0; i < objs.length; i++) {
 //这用闭包 不用闭包会有问题
 ~function(ind){
 var obj=objs[ind];
 obj.onclick=function(){
 var sonInputsParent= obj.parentNode.parentNode.parentNode.nextElementSibling;//所有需要跟着选中的input的父节点
 var sonInputs=sonInputsParent.getElementsByClassName('s1');//如果没有其他的复选框可以用getElementsByTagName;
 for (var j = 0; j < sonInputs.length; j++) {
 var inputObj = sonInputs[j];
 inputObj.checked=obj.checked;
 }
 }
 }(i);
 }
}