基于JS实现checkbox全选功能实例代码


Posted in Javascript onOctober 31, 2016

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中。此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧!

效果图如下:

点击全选之前:

基于JS实现checkbox全选功能实例代码

点击全选之后:

基于JS实现checkbox全选功能实例代码

再次点击全选之后:

基于JS实现checkbox全选功能实例代码

代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<input type="checkbox" onclick="quanxuan()">全选 
<input type="checkbox" name="nation">唱歌 
<input type="checkbox" name="nation">跳舞 
<input type="checkbox" name="nation">书法 
</body> 
<script type="text/javascript"> 
var k=0; 
function quanxuan(){ 
var s=document.getElementsByName("nation"); 
if(k%2==0) 
{ 
for(var i=0;i< s.length;i++) 
{ 
s[i].checked=true; 
} 
k++; 
} 
else { 
for(var j=0;j< s.length;j++) 
{ 
s[j].checked=false; 
} 
k++; 
} 
} 
</script> 
</html>

以上所述是小编给大家介绍的基于JS实现checkbox全选功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 #Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 #Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 #Javascript
jQuery grep()方法详解及实例代码
Oct 30 #Javascript
webix+springmvc session超时跳转登录页面
Oct 30 #Javascript
js获取时间函数及扩展函数的方法
Oct 30 #Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 #Javascript
You might like
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Python中Class类用法实例分析
2015/11/12 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
django创建简单的页面响应实例教程
2019/09/06 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
python实现打砖块游戏
2020/02/25 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
介绍一下游标
2012/01/10 面试题
房地产融资计划书
2014/01/10 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
中秋节主持词
2014/04/02 职场文书
上班离岗检讨书
2014/09/10 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
百年校庆感言
2015/08/01 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis