html+css+js 设置全选全不选，并且复选框全部选择后，全选框自动选择的代码

最新推荐文章于 2023-05-15 21:17:26 发布
最新推荐文章于 2023-05-15 21:17:26 发布
阅读量218 收藏 1
点赞数 1
分类专栏： web 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50887531/article/details/116158360
版权

效果如下：
在这里插入图片描述

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
	<script src="js/全选和取消全选.js"></script>
	<style>
		table {
			margin: 100px auto;
			border:1px solid #333;
			
			text-align: center;
		}
		td{
			border: 1px solid #333;
			height: 70px;
			width:80px;
		}
		thead tr {
			font-weight: bold;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<td><input type="checkbox">全选</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox">选择</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td><input type="checkbox">选择</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td><input type="checkbox">选择</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

js文件

 window.onload = function () {
	var aInput = document.getElementsByTagName('input');
	for(var i=1; i<aInput.length; i++)
	{
		aInput[i].onclick=function () {
			if(!this.checked)
			{
				aInput[0].checked=false;
			}
			var selected=0;
			for(var i=1;i<aInput.length;i++){
				if(aInput[i].checked){
					selected+=1;
				}
			}
			if(selected==aInput.length-1){
				aInput[0].checked=true;
			}
		}
		aInput[0].onclick=function () {
			for(var i=1; i<aInput.length; i++)
				aInput[i].checked=aInput[0].checked;
		}
	}
}
藏空满
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
checkbox 复选框不能为空
12-11
代码如下:[removed] function check_check(checkname){ var flag; var checks = document.getElementsByName(checkname); for(var i=0;i<checks.length;i++){ if(checks[i].checked==true){ flag = true; return true; break; } } if(!flag){ //alert(“请至少选择一项”); return false; } } [removed]
全选反选的html的代码,html js 全选 反选 全不选源代码
weixin_34007963的博客
06-22 239
全选，反选按钮window.onload=function(){/**1 #checkedAllBtn* 2 #checkedBoBtn* 3 #checkedRevBtn* 4 #sendBtn* 5 #checkedAllBox* 6 #items* */var checkedAllBtn = document.getElementById("checkedAllBtn");//checked...
全选和全不选代码
wangmengsasa的博客
06-23 167
全选和全不选代码
html页面全选全不选,全选与全不选.html
weixin_31147827的博客
06-03 511
.top a{color: #000000;text-decoration: none;}.top{border-bottom: 1px solid;/* font-size: 12px; */}.box{width: 110px;border: 1px solid;height: 330px;margin: 100px auto;}.bottom{}.bottom label{width: 10...
html全选和全不选效果,checkbox全选和反选（全不选） JavaScript代码 完整示例
weixin_35278121的博客
06-03 394
今天一位朋友在用bootstrap做后台html静态页面的时候，他想用 bootstrap+JavaScript实现“checkbox全选和全不选”的效果。JavaScript代码完整示例：checkbox的全选和取消全选//页面加载的时候,所有的复选框都是未选中的状态function checkOrCancelAll(){//1.获取checkbo的元素对象var chElt=document...
javascript 复选框选择/全选后特效
10-30
全选框的事件监听函数将所有复选框的状态设置为全选框的状态，而每个复选框的事件监听函数将检查所有复选框是否都被选中，如果是，则将全选框的状态设置为 true。 四、特效实现 现在，我们可以使用 JavaScript ...
利用Bootstrap实现表格复选框checkbox全选
08-31
请注意，我们在`<thead>`中的第一列添加了一个空的`<th>`元素，用于放置全选复选框。在`<tbody>`中，每行的第一列我们添加了一个单独的复选框。 接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选...
javascript实现checkbox复选框实例代码
10-22
在给定的示例中，CSS类`.CheckBoxClass`用于隐藏实际的复选框元素，而`.CheckBoxLabelClass`则设置了一个背景图片，模拟复选框的未选中状态。当鼠标悬停时，通过添加`.CheckBoxLabelClass:hover`样式，使标签下划线...
js获取单选框或复选框值及操作
12-09
代码中还有其他未展示的部分，如`submit1`函数，它可以用来获取选定的值，全选、全不选或反选复选框。这些功能扩展了对复选框的操作，提供了更多的交互性。 总结来说，这段代码展示了如何利用JavaScript操作HTML中...
Web系统与技术个人主页小米商城密码控件复选框全选框简易计算器ServletSessionServlet JDBC
最新发布
01-13
复选框和全选框则是用户交互的重要元素，复选框允许用户多选，全选框可以一键选择所有选项，这些功能可以通过HTML配合JavaScript来实现。 4. **简易计算器**：使用HTML、CSS和JavaScript可以构建一个简单的计算器，...
纯CSS设置Checkbox复选框控件的样式(五种方法)
09-24
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式
HTML实现全选，全不选
热门推荐
qq_42611148的博客
08-23 1万+
代码如下： &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; td{ border: 1px solid rebeccapurple;
html js全选全不选
dreanms的博客
05-15 361
通过js实现全选全不选
HTML5+JavaScript(全选和全不选)
Noviceduderi的博客
11-30 1742
全选/全不选                                                                                                                                                                   var check1 = doc
html页面列表一键全选选,JQuery控制Html页面Checkbox全选和全不选
weixin_32652107的博客
06-03 1207
说明：Checkbox的全选和全不选应用较为普遍，网上的资料大多数都是原生JS的实现方式，大家你超我，我超你，没意思！今天用JQuery试着写了一下，采用了新的角度实现，供大家参考一下，直接上代码，解释在代码里都写了！1、Html页面代码姓名手机号码部门张三13000000001技术部李四13000000002技术部王五13000000003技术部赵六13000000004人事部田七1300000...
html 实现全选与取消全选
丿灬安之若死
07-25 1589
这个组件 <th class="col-1 col-lg-1 col-md-1 col-xs-1">批量选中/取消 <input type="checkbox" id="feedback_ids_all" onclick="changeClickStat...
js 全选选框与取消全选代码
weixin_30500663的博客
09-09 141
设置一个全选选框和四个子选框，要实现点击全选后四个子选框选中，取消全选后四个子选框也取消。全选后点击某个子选框，全选也能取消。当四个子选框都选中时，全选框也被选择。 实现代码： <script> var a=document.getElementById("a"); var b=document.getElementsByClassName("b"); //全选与取消...
html全选框选完自动全选,多选框：全选+选中值.html
weixin_39644325的博客
05-31 235
梨子李子栗子荔枝全选var checkAll = document.getElementById('checkall');var inputs = document.getElementById('content').getElementsByTagName('input');console.log(inputs.length)checkAll.onclick = function() {for(...
全选、全不选、反选功能的实现
飞鱼同学
01-26 4590
全选、全不选、反选 实现的功能是： 选中下面全选框，全部的框都会选中，反之就会全不选中； 当点击反选按钮时，选择框中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选、全不选、反选</title> </head> <body> <f
HTML+CSS+jQuery实现：设置复选框至少3个。设置按钮，全选，反选，全不选。
05-30
好的，我可以为您提供一个基本的HTML+CSS+jQuery示例实现，如下所示： ```html <!DOCTYPE html> <html> <head> <title>复选框操作示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style type="text/css"> .container { margin: 20px; } .checkbox-group { margin-bottom: 10px; } .checkbox-group label { margin-right: 10px; } .button-group { margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="checkbox-group"> <label><input type="checkbox" name="checkbox[]" value="1">选项1</label> <label><input type="checkbox" name="checkbox[]" value="2">选项2</label> <label><input type="checkbox" name="checkbox[]" value="3">选项3</label> <label><input type="checkbox" name="checkbox[]" value="4">选项4</label> <label><input type="checkbox" name="checkbox[]" value="5">选项5</label> </div> <div class="button-group"> <button id="select-all">全选</button> <button id="select-inverse">反选</button> <button id="select-none">全不选</button> </div> </div> <script type="text/javascript"> $(function() { // 全选 $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', true); }); // 反选 $('#select-inverse').click(function() { $('input[type="checkbox"]').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); }); // 全不选 $('#select-none').click(function() { $('input[type="checkbox"]').prop('checked', false); }); }); </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含5个复选框的`checkbox-group`，并且定义了一个包含三个按钮的`button-group`。然后，我们使用jQuery来实现三个操作： 1. 全选：当用户点击`select-all`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`true`，从而实现全选的功能。 2. 反选：当用户点击`select-inverse`按钮时，我们使用`each`方法遍历所有复选框，并对每个复选框的`checked`属性取反，从而实现反选的功能。 3. 全不选：当用户点击`select-none`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`false`，从而实现全不选的功能。 希望这个示例能够帮助您实现您的需求！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

藏空满

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值