基于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 - 如何引入js代码
Mar 09 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 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
德生H-501的评价与改造
2021/03/02 无线电
杏林同学录(九)
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php生成二维码
2015/08/10 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
电气技术员岗位职责
2013/11/19 职场文书
廉政教育心得体会
2014/01/01 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
公司捐书倡议书
2015/04/27 职场文书
活动简报范文
2015/07/22 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL