基于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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
解析php入库和出库
2013/06/25 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript事件列表解说
2006/12/22 Javascript
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
js星星评分效果
2014/07/24 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
Python中实现三目运算的方法
2015/06/21 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python使用configparser库读取配置文件
2020/02/22 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
2014元旦晚会策划方案
2014/02/19 职场文书
学校交通安全责任书
2014/08/25 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技