全选复选框JavaScript编写小结(附代码)


Posted in Javascript onAugust 16, 2017

对于全选框的操作分为两种情况:

1.单击全选框,下面全部选中

2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中。

html样式

<tr>
     <td>爱  好</td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label>
     </td>
    </tr>

js样式

var oChkAll = document.getElementById("checkAll");
    //全选
    oChkAll.onclick = function() {
     for(var i = 0; i < oFav.length; i++) {
      oFav[i].checked = this.checked;
     }
    }
    //复选框组
    for(var i = 0; i < oFav.length; i++) {
     oFav[i].onclick = function() {
      //如果全选
      if(isChkAll()) {
       oChkAll.checked = true;
      } else {
       oChkAll.checked = false;
      }
     }
    }
    //判断是否全选
    function isChkAll() {
     var all = oFav.length;
     var chk = 0;
     for(var i = 0; i < oFav.length; i++) {
      if(oFav[i].checked) {
       chk++;
      }
     }
     if(all == chk) {
      return true;
     } else {
      return false;
     }
    }

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
vue实现底部菜单功能
Jul 24 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 #Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 #Javascript
JavaScript实现三级联动菜单效果
Aug 16 #Javascript
ionic3 懒加载
Aug 16 #Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 #Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 #Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
javascript 节点排序 2
2011/01/31 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript生成大小写字母
2015/07/03 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
python装饰器实例大详解
2017/10/25 Python
pytorch permute维度转换方法
2018/12/14 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python创建学生管理系统
2019/11/22 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
法学毕业生自我鉴定
2013/11/08 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
优秀班组申报材料
2014/12/25 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Java基于字符界面的简易收银台
2021/06/26 Java/Android
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS