1. 程式人生 > >js實現複選框的全選 取消全選

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>