原生JavaScript实现全选,反选,全不选(源码分享)
时间:2018-11-19
本文章向大家介绍js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码,需要的朋友可以参考一下
使用js实现全选、反选、全不选。
代码如下:
<html> <head> <script type="text/javascript"> function checkEvent(name,allCheckId) { var allCk=document.getElementById(allCheckId); if(allCk.checked==true) checkAll(name); else checkAllNo(name); } //全选 function checkAll(name) { var names=document.getElementsByName(name); var len=names.length; if(len>0) { var i=0; for(i=0;i<len;i++) names[i].checked=true; } } //全不选 function checkAllNo(name) { var names=document.getElementsByName(name); var len=names.length; if(len>0) { var i=0; for(i=0;i<len;i++) names[i].checked=false; } } //反选 function reserveCheck(name) { var names=document.getElementsByName(name); var len=names.length; if(len>0) { var i=0; for(i=0;i<len;i++) { if(names[i].checked) names[i].checked=false; else names[i].checked=true; } } } </script> </head> <body> <input type="checkbox" id="ckall" onclick="checkEvent('ckcontact','ckall')" />全选 <input type="checkbox" id="ckReserve" onclick="reserveCheck('ckcontact','ckReserve')" />反选 <br /> <input type="checkbox" name="ckcontact" value="1" />篮球 <br /> <input type="checkbox" name="ckcontact" value="2" />旅游 <br /> <input type="checkbox" name="ckcontact" value="3" />读书 <br /> <input type="checkbox" name="ckcontact" value="4" />美食 <br /> <input type="checkbox" name="ckcontact" value="5" />睡觉 </body> </html>
- 一个可扩展的报警系统Quick-Alarm
- 如何借助GitHub搭建属于自己的maven仓库
- Java可以如何实现文件变动的监听
- 如何在CDH中安装Kudu&Spark2&Kafka
- 秒懂 javascript 拖拽上传文件
- 一款轻量级树形控件EasyTreeview
- 大白话谈 Git
- 打造一个属于自己的 server
- 一款不可多得的火柴时钟
- 常见端口转发工具的使用方式(二)
- 如何在CDH启用Kerberos的情况下安装及使用Sentry(一)
- 打造炫酷的通知插件EasyToaster
- 世界智能驾驶挑战赛信息安全组——新人扫盲
- 如何在CDH启用Kerberos的情况下安装及使用Sentry(二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- UTM坐标的遥感图,Python终于把它扶正啦(手动狗头)
- Flutter框架分析(一)-- 总览和Window
- R海拾遗-sci配色
- Flutter框架分析(二)-- 初始化
- Flutter框架分析(三)-- Widget,Element和RenderObject
- 傅里叶变换的图像应用--学好了用处大~
- Flutter框架分析(四)-- Flutter框架的运行
- R海拾遗-流程图prismadiagramR
- R海拾遗-单项重复测量方差分析
- R海拾遗-双因素重复测量方差分析
- 小白秒变大神--windows窗口+装B神器大全 两部曲
- R海拾遗-三因素重复
- 推荐一种简单的在Flutter中分离View与Model的方法
- R海拾遗-tidyverse
- Flutter Hooks 使用及原理