基于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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
理解jQuery stop()方法
Nov 21 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
JavaScript中的this机制
Jan 30 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
详解React的回调渲染模式
Sep 10 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
会计学专业求职信
2014/07/17 职场文书
公司授权委托书范文
2014/08/02 职场文书
公司离职证明标准样本
2014/10/05 职场文书
小学家长通知书评语
2014/12/31 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
小学大队长竞选稿
2015/11/20 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
python获取带有返回值的多线程
2022/05/02 Python