js实现复选框的全选 取消全选


html伪代码

 <table>
    <tr>
        <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>
    </tr>
    </thead>
    <tbody>
    <td><input type="checkbox" name="checkname"value="1"/></td>
    <td><input type="checkbox" name="checkname" value="2"/></td>
    <td><input type="checkbox" name="checkname" value="3"/></td>
    <td><input type="checkbox" name="checkname" value="4"/></td>
    <td><input type="checkbox" name="checkname" value="5"/></td>
    </tbody>
<table>

js部分代码 

<script>
    function checkAll() {
          
        var father=document.getElementById('checkall'); //获取到父亲复选框(控制全选的id
          
        var son=document.getElementsByName('checkname'); //获取儿子复选框名称name
        
        if(father.checked==true){//因为获得的是数组,所以要循环 为每一个checked赋值
           
             for(var i=0;i<son.length;i++){
                
                son[i].checked=true;
            }
 
        }else{
                
                for(var j=0;j<son.length;j++){
                
                son[j].checked=false;
            }
        }
    }
</script>

猜你喜欢

转载自blog.csdn.net/weixin_42630877/article/details/83063593