JavaScript实现页面一键全选或反选

已于 2023-04-06 12:49:06 修改
阅读量793 收藏 1
点赞数
分类专栏： 有趣的前端 文章标签： javascript html
于 2021-11-11 20:08:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48660016/article/details/121275090
版权 
<!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>

一只笨菜鸟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现全选(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 452
js实现全选(附完整源码)
如何实现一键全选
Towify的博客
11-18 1138
使用Towify制作微信小程序，实现一键全选
使用原生js实现按钮的全选功能，简单清晰
qq_44890362的博客
07-04 551
1.相信有很多朋友在学习前端原生JS的时候，都有遇到过实现全选按钮的需求吧。废话不多说直接上代码吧！ 2.其实实现这个功能不难，我们需要有的是实现这个功能时候的编码思想。
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 1575
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
JS实现分页功能（单选按钮、全选按钮、跳转页面）
qingdouxiaohua的博客
09-19 321
这里展现出成品的样式，接下来让我们欣赏来自代码的快乐。
定义简单的页面复选框实现全选操作
PleaseBeStrong的博客
05-03 615
解决完上述问题后，在调试中发现 在全选按钮选中的情况下，取消其他子选项并没有取消全选，所以此时我们应该在子按钮的。而对于点击保存按钮以后与后端交互的逻辑这里就不细述，其实也就是把当前的。事件中做相应的逻辑完善，即简单判断当前角色的idList是否于全选状态下的idList长度相等即可。方法来获取到数据库中所有的角色集合，然后通过遍历该集合获取到所有。传回去，后端通过比较新的idList和旧的idList，存放从后端获取到的当前员工对应的角色id数组。存放获取到的所有角色列表，用于页面渲染。
javascript实现简单的全选和反选功能
01-19
本文实例讲解了javascript实现简单的全选和反选功能的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &...
javascript实现checkBox的全选，反选与赋值
10-24
主要介绍了javascript实现checkBox的全选，反选与赋值的方法，以实例形式详细分析了实现的思路及对应的html与js代码的实现过程
JavaScript列表框listbox全选和反选的实现方法
10-24
主要介绍了JavaScript列表框listbox全选和反选的实现方法,涉及javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
javascript实现复选框全选或反选
12-10
以下是用原生js实现的复选框全选/反选的实现，选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 <!DOCTYPE html> <html lang="en"> <head&gt...
【JavaScript】按钮全选功能实现
Lee的博客
12-02 423
JavaScript按钮全选功能实现 使用checkbox时，可以实现全选功能 <html> <head> <title> 全选按钮的实现 </title> <meta charset="utf-8"> </head> <body> <div> <input type="checkbox" id="select_all" onclick="checkAll(this);" />全选 &l
全选按钮制作javascript脚本.html
05-26
用javascript编译的全选按钮制作javascript脚本.html
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1028
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
一键实现全选和全不选
guxuehua的博客
02-22 3096
html代码<div id="box"> <p><input type="checkbox">1</p> <p><input type="checkbox">2</p> <p><input type="checkbox">3</p> <p><input type="checkbox">4</p> <p><input type="checkbox">5</p>
选中全选框
匿名丶OC
05-01 570
这里是HTML <table> <tr> <th> <input type="checkbox" name="" id="checkAll"/>全选/全不选 </th> <th>菜名</th> <th>商家</th> <th>价格</
html页面列表一键全选选,JSP页面中，列表的全选以及多选后的操作
weixin_35573869的博客
06-03 798
可以实现全选、反全选。以及对选中的多个列表项，进行相同的处理。例子中为删除选中的行。代码如下：pageEncoding="utf-8"%>全选以及批量删除function allSelected() {var handleEl = document.getElementById("pcheckedall");var checkBoxList = document.getElementsByN...
页面实现全选和批量操作
渣渣想逆袭
01-23 1万+
全选的思路是：遍历标签下的type为checkbox的input标签，改变这些checkbox的check状态和点击全选的状态一样 批量操作的思路是：用js获取记录中的id用逗号拼接，传到后台执行批量操作的处理 全选js： $("#checkAll").click(function() { var rows = $("#content").find('input'); ...
js实现全选功能
热门推荐
zhaojianyin
08-23 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选练习</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("all"); btn
checkbox的全选和取消全选按钮的js
cwj1103
12-09 1548
//全选、取消全选 function selectAll() { var checked = $("#checkall").attr("checked"); $("input[name='checkbox_name']").each(function() { if (checked) { $(this).attr("checked", "checked");//全选
javascript简单的例子追加和一键全选
最新发布
05-31
JavaScript 是一种非常流行的编程语言，可以用于实现丰富的交互式 Web 页面。以下是 JavaScript 实现追加和一键全选的简单例子： 追加： ```html <!DOCTYPE html> <html> <head> <title>JavaScript 追加文本</title> <script> function appendText() { var text = document.getElementById("text").value; document.getElementById("output").innerHTML += text; } </script> </head> <body> <input type="text" id="text"> <button onclick="appendText()">追加</button> <p id="output"></p> </body> </html> ``` 这个例子中，我们通过 `getElementById` 方法获取了输入框和输出区域的 DOM 元素，并通过 `innerHTML` 属性将输入框中的文本追加到输出区域中。 一键全选： ```html <!DOCTYPE html> <html> <head> <title>JavaScript 一键全选</title> <script> function selectAll() { document.getElementById("text").select(); } </script> </head> <body> <input type="text" id="text"> <button onclick="selectAll()">全选</button> </body> </html> ``` 这个例子中，我们通过 `getElementById` 方法获取了输入框的 DOM 元素，并通过 `select` 方法将输入框中的文本全选中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值