基于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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
js格式化时间的方法
Dec 18 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
最新最全的手机号验证正则表达式
Feb 24 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php字符串截取问题
2006/11/28 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
基于python监控程序是否关闭
2020/01/14 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
工程招投标邀请书
2014/01/30 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
西安大雁塔导游词
2015/02/10 职场文书
停发工资证明范本
2015/06/12 职场文书