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


Posted in Javascript onFebruary 09, 2017

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

效果图:

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

测试代码如下:

<!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>

直接复制代码可用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery封装的对话框简单实现
Jul 21 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
详解js创建对象的几种方法及继承
Apr 12 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
NET程序员上机面试题
2015/05/23 面试题
文艺晚会主持词
2014/03/24 职场文书