基于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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python实现决策树分类算法
2017/12/21 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
五好党支部事迹材料
2014/02/06 职场文书
职工趣味运动会方案
2014/02/10 职场文书
建议书标准格式
2014/03/12 职场文书
年终奖发放方案
2014/06/02 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
公开致歉信
2019/06/24 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏