【JS】复选框的全选和取消全选

来源：互联网发布：淘宝娱乐宝下载安装编辑：程序博客网时间：2024/05/11 22:38

这里写图片描述

测试代码如下：

第一种：纯原生版

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div class="first">        <ul class="frtInfo">            <li>                <label><input type="checkbox" name="wp" value="wpa"/>液体</label>            </li>            <li>                <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>            </li>            <li>                <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>            </li>            <li>                <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label>            </li>            <li>                <label><input type="checkbox" name="wp" value="wpe"/>危险品</label>            </li>            <li>                <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label>            </li>            <li>                <label><input name="allChecked" id="allChecked" onclick="DoCheck()" class="allChk" type="button" value="全选/取消"/></label>            </li>        </ul>    </div>    <script type="text/javascript">        function DoCheck(){            var ch=document.getElementsByName("wp");            if(document.getElementsByName("allChecked")[0].checked==true){                for(var i=0;i<ch.length;i++){                    ch[i].checked=true;                }            }else{                for(var i=0;i<ch.length;i++){                ch[i].checked=false;                }            }        }    </script></body></html>

第二种：jQuery版

<!DOCTYPE Html><html><head>    <meta charset="UTF-8">    <title>全选/全取消</title></head><body>    <div>        新闻<input type="checkbox"/><br/>        电影<input type="checkbox"/><br/>        音乐<input type="checkbox"/><br/>        娱乐<input type="checkbox"/><br/>        八卦<input type="checkbox"/><br/>        直播<input type="checkbox"/><br/>    </div>    <input type="checkbox" onclick="selectAll(this);" />全选/全取消<br/>    <script src="js/jquery-1.11.3.js"></script>    <script type="text/javascript">        function selectAll(checkbox) {            $('input[type=checkbox]').prop('checked', $(checkbox).prop('checked'));        }    </script></body></html>

0 0