使用js實現復選框的全選、取消功能

id為all的想設置全選的那個框的id，name為checkname[]的是每個小復選框；

第一種：

<script>

    function checkAll() {

        var all=document.getElementById('all');//獲取到點擊全選的那個復選框的id

        var one=document.getElementsByName('checkname[]');//獲取到復選框的名稱

        if(all.checked==true){//因為獲得的是數組，所以要循環 為每一個checked賦值

            for(var i=0;i<one.length;i++){

                one[i].checked=true;

            }

 

        }else{

            for(var j=0;j<one.length;j++){

                one[j].checked=false;

            }

        }

    }

</script>

第二種：

<span style="font-size:14px;"><script>

function checkAll() {

var all=document.getElementById('all');//獲取到點擊全選的那個復選框的id

var one=document.getElementsByName('checkname[]');//獲取到復選框的名稱

//因為獲得的是數組，所以要循環 為每一個checked賦值

for(var i=0;i<one.length;i++){

one[i].checked=all.checked; //直接賦值不就行了嘛

}

}

</script></span>

html代碼：

    <thead>

    <tr>

        <td><input type="checkbox" name="all" id="all" 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>