JavaScript实现页面一键全选或反选
更新时间：2022年07月05日 11:36:26 作者：静静...
这篇文章主要为大家详细介绍了JavaScript实现页面一键全选或反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现页面一键全选或反选的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.hobby {
width: 600px;
height: 50px;
background-color: #5F9EA0;
line-height: 50px;
}
.but {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="hobby">
<!-- 创建多选框 -->
<input type="checkbox" checked="true" name="hobby" id="" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" id="" value="赛车" />赛车
<input type="checkbox" name="hobby" id="" value="听音乐" />听音乐
<input type="checkbox" name="hobby" id="" value="看杂志" />看杂志
<!-- 选择按钮 -->
<div class="but">
<button type="button" onclick="selectAll(this)">全选</button>
<button type="button" onclick="selectAllOut()">全不选</button>
</div>
</div>
<script type="text/javascript">
// 全选方法
function selectAll(obj) {
var a = document.getElementsByName("hobby");
for (var i = 0; i < a.length; i++) {
a[i].checked = "true";
console.log(a[i].value)
}
};
// 全部取消方法
function selectAllOut() {
var a = document.getElementsByName("hobby");
for (var i = 0; i < a.length; i++)
a[i].checked = "";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
marquee （水平）循环滚动的js实现 ,需要的朋友可以参考下。2010-03-03
document.getElementById方法在Firefox与IE中的区别
相信很多朋友在写JavaScript的时候，对浏览器的兼容问题会感到很头疼。这不，烦什么，什么就来了，特记录下来，与大家分享。2010-05-05
这篇文章主要介绍了详解webpack import()动态加载模块踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
在JavaScript中，有3个关键字可以声明变量：var、const和let，其中var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6及更晚的版本中使用，本文就来说说二者的区别，感兴趣的可以了解一下2022-11-11
这篇文章主要介绍了微信小程序的宿主环境,包括scroll-view 组件的基本使用，text 组件的基本使用及rich-text 组件的基本使用，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
JavaScript中的null和undefined区别介绍
这篇文章主要介绍了JavaScript中的null和undefined区别介绍,JavaScript中存在2个代表信息不存在的特殊值：null和undefined,本文主要讲解它们的区别,需要的朋友可以参考下2015-01-01
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
本篇文章主要介绍了详解用webpack的CommonsChunkPlugin提取公共代码的3种方式，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
javascript实现tabs选项卡切换效果(自写原生js)
常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果，感兴趣的朋友可以参考下哈2013-03-03
由于浏览器的安全限制,Javascript无法直接获取用户上传文件的绝对路径。但是我们可以通过一些技巧来获取文件的相对路径,这篇文章主要给大家介绍了关于js获得相对路径文件并上传到服务器的相关资料,需要的朋友可以参考下2023-11-11
最新评论