基于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 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
Json解析的方法小结
Jun 22 Javascript
js定时器实例分享
Dec 20 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
新手学习前端之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
PHP写杨辉三角实例代码
2011/07/17 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
理解Python中的类与实例
2015/04/27 Python
Python从零开始创建区块链
2018/03/06 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
C#公司笔试题
2014/03/28 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
统计学教授推荐信
2014/09/18 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记
Nginx配置使用详解
2022/07/07 Servers