基于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 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
js密码强度校验
Nov 10 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JavaScript File分段上传
Mar 10 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
JavaScript实现弹出窗口效果
Dec 09 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一些有意思的小区别
2006/12/06 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python实现excel读写数据
2021/03/02 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
最新pycharm安装教程
2020/11/18 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
演讲稿怎么写
2014/01/07 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
倡议书格式及范文
2015/04/29 职场文书
就业推荐表院系意见
2015/06/05 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server