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

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

效果图：

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{list-style: none;}
  </style>
</head>
<body>
  <div 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>
  </div>
  <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>

直接复制代码可用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js复选框全选 # js复选框取消全选 # js复选框多选 # 比较全的JS checkbox全选、取消全选、删除功能代码 # Javascript实现CheckBox的全选与取消全选的代码 # js multiple全选与取消全选实现代码 # js实现复选框的全选和取消全选效果 # javascript 全选/反选 # 取消选择效果 # CheckBox为CheckBoxList实现全选或全取消选择(js代码实现) # JS小功能(checkbox实现全选和全取消)实例代码 # JS控件ASP.NET的treeview控件全选或者取消(示例代码) # javascript 全选与全取消功能的实现代码 # JS实现表单全选以及取消全选实例 # 全选 # 大家分享 # 具体内容 # 大家多多 # 复选框 # charset # title # UTF # meta # lang # en # head # li # frtInfo # label # input # ul # list # body # div

返回目录在线咨询

上一篇：网站制作公司,一个网站的运营，需要哪些费用？
下一篇：云建站官网打不开，DNS设置出错怎么办？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求