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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-04-04
一般的面向对象程序语言，有两种继承方法——接口继承（interface inheritance）和实现继承（implementation inheritance）。接口继承只继承方法签名，而实现继承则继承实际的方法。在JavaScript中，函数没有签名，所以在JavaScript只支持实现继承，而且主要是依靠原型链（prototype chaining）来是实现的2013-05-05
这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
浅析javascript异步执行函数导致的变量变化问题解决思路
下面小编就为大家带来一篇浅析javascript异步执行函数导致的变量变化问题解决思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
这篇文章主要为大家分享了B/S(Web)实时通讯的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料，需要的朋友可以参考下。2017-11-11
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
这篇文章主要介绍了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能,结合实例形式详细分析了toast组件实现消息提示功能的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。2009-05-05
比如要判断一个变量是否是数组类型,PHP中有is_array()函数可以直接判断,然而js中我们需要...-- well,下面我们就来详细看一下JavaScript中判断数据类型的方法总结2016-05-05
Javascript中的return作用及javascript return关键字用法详解
本文给大家介绍Javascript中的return作用及javascript return关键字用法详解，对于大家学习javascript中的return知识有所帮助，感兴趣的朋友一起学习吧2015-11-11
最新评论