基于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 For Beginners(转载)
Jan 05 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
JS猜数字游戏实例讲解
Jun 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 变量类型的强制转换
2009/10/23 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Javascript - HTML的request类
2007/01/09 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python常见数据结构详解
2014/07/24 Python
python中requests模块的使用方法
2015/04/08 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
windows下python和pip安装教程
2018/05/25 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
常用的10个Python实用小技巧
2020/08/10 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
煤矿机修工岗位职责
2014/02/07 职场文书
多媒体教室标语
2014/06/26 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
解约证明模板
2015/06/19 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS