基于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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
javascript绘制简单钟表效果
Apr 07 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
详解python中__name__的意义以及作用
2019/08/07 Python
详解python 中in 的 用法
2019/12/12 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
应届毕业生自我评价分享
2013/12/15 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
大型会议接待方案
2014/03/01 职场文书
护士个人自我鉴定
2014/03/24 职场文书
企业员工集体活动方案
2014/08/17 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技