基于JS实现checkbox全选功能实例代码
更新时间：2016年10月31日 09:05:09 作者：xiaoLong2345
最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单，再次点击全选取消选中。下面小编给大家分享实现代码，对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全选功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理
页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。容器的尺寸是指当前分辨率下的高度和宽度（分辨率不同，值就不相同）。2023-02-02
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
下面小编就为大家带来一篇js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
本篇文章主要介绍了js制作简单的音乐播放器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加2016-03-03
WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等,涵盖了音视频处理和传输的方方面面,下面这篇文章主要给大家介绍了关于如何基于webRTC实现人脸识别的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家详细介绍了微信小程序实现底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JavaScript获取css行间样式,内连样式和外链样式的简单方法
下面小编就为大家带来一篇JavaScript获取css行间样式,内连样式和外链样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
本文通过简单代码给大家介绍了js解析url查询参数的方法，然后在文章下面给大家介绍了js获取url参数值的两种方式 ，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-08-08
本篇文章主要介绍了详解cordova打包成webapp的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论