基于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学习笔记之jQuery的动画
Dec 22 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
Laravel框架表单验证详解
2014/09/04 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php阳历转农历优化版
2016/08/08 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Python基础之函数用法实例详解
2014/09/10 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
完整版商业计划书
2014/09/15 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS