全选复选框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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
js字符串转成JSON
Nov 07 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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 mail to 配置详解
2014/01/16 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
php集成开发环境详解
2019/09/24 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
行政文员岗位职责
2013/11/08 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
企业总经理职责
2014/02/02 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
社区元宵节活动总结
2015/02/06 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书