input 全选 jquery封装方法

Posted 2020-10-27 前端小超人

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);
    }
}