基于JavaScript实现复选框的全选和取消全选

来源：酷升汽车网

这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js复选框的全选和取消全选的具体代码，供大家参考，具体内容如下

效果图：

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 li{list-style: none;}
 </style>
</head>
<body>
 <p class="first">
 <ul class="frtInfo">
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpa"/>液体</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpe"/>危险品</label>
 </li>
 <li class="same">
 <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label>
 </li>
 <li class="same select">
 <label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label>
 </li>
 </ul>
 </p>
 <script src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 /*全选或取消全选*/
 function selectAllDels(){
 var allWp=document.getElementsByName("wp");
 var selOrUnsel=false;
 for(var i=0; i<allWp.length;i++){
 if(allWp[i].checked){
 selOrUnsel=true;
 break;
 }
 }
 if (selOrUnsel){
 allUnchk(allWp);
 }else{
 allchk(allWp);
 }
 }
 function allchk(allWp){
 for(var i=0; i<allWp.length;i++ ){
 allWp[i].checked=true;
 }
 }
 function allUnchk(allWp){
 for(var i=0; i<allWp.length;i++){
 allWp[i].checked=false;
 }
 }
 </script>
</body>
</html>

直接可用。