基于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 相关文章推荐
jquery为页面增加快捷键示例
Jan 31 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
新手学习前端之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音乐采集(部分代码)
2007/02/14 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Java基础知识面试要点
2016/07/29 面试题
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
药学职务聘任书
2014/03/29 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
代理人委托书
2014/09/16 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
挂职个人工作总结
2015/03/05 职场文书