全选复选框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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
vue component组件使用方法详解
Jul 14 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php全角字符转换为半角函数
2014/02/07 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python 字符串定义
2009/09/25 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python中的字典使用分享
2016/07/31 Python
使用matplotlib画散点图的方法
2018/05/25 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python sep参数使用方法详解
2020/02/12 Python
python爬虫请求头的使用
2020/12/01 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
先进单位申报材料
2014/12/25 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
诚信高考倡议书
2019/06/24 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Win11查看设备管理器
2022/04/19 数码科技