基于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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP闭包实例解析
2014/09/08 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 图片验证码代码
2008/12/07 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
深入了解Django View(视图系统)
2019/07/23 Python
python之列表推导式的用法
2019/11/29 Python
Python安装OpenCV的示例代码
2020/03/05 Python
解决c++调用python中文乱码问题
2020/07/29 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
师范生自荐信范文
2013/10/06 职场文书
自我鉴定书面格式
2014/01/13 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python