基于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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 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脚本的10个技巧(8)
2006/10/09 PHP
mysql5写入和读出乱码解决
2006/11/25 PHP
php过滤危险html代码
2008/08/18 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python学习pygal绘制线图代码分享
2017/12/09 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
软件项目实施计划书
2014/05/02 职场文书
比赛口号大全
2014/06/10 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
退货证明模板
2015/06/23 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python