使用js实现复选框的全选、取消功能

来源：互联网发布：java微信扫码支付demo 编辑：程序博客网时间：2024/05/02 01:34

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');//获取到点击全选的那个复选框的idvar 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>

1 0