js实现复选框的操作-------Day41

本文介绍了如何通过HTML和JavaScript优化复选框的全选与全不选操作,通过简化代码实现更高效的功能,并提供了解析实现方法与对比分析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不知道之前的一篇为什么一直处于审核阶段,难道有哪个词语是敏感词被河蟹了?

不管了,重新写了这篇,也算是加深记忆吧。

首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选,首先来编写下html语言

<table>
    	<thead>
	    	<tr>
	    		<td><input type="checkbox" id="sall" onchange="changeAll()"></td>
	    	</tr>
    	</thead>
    	<tbody>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="1"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="2"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="3"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="4"></td>
	    	</tr>
    	</tbody>
    </table>
来写一下从网上搜罗后最终实现的比较简单明了的写法,比自己写的好了不止一倍啊

function changeAll(){
		var sall=document.getElementById("sall");//获取标题栏中的操作对象
		var seach=document.getElementsByName("each");//获取内容栏的对象
		for(var i=0;i<seach.length;i++){
			if (sall.checked) {
				seach[i].checked=true;
			}else{
				seach[i].checked=false;
			}
		}
	}
来分析下它的实现方法,比自己写的果断要好了不少,自己当时采取了两种方法,但是远不如这个成型的简介明了,自己的全用id来操作确实又臭又长了。

对复选框的操作还有比较常见的复选框,就上面这个例子来的话,我们来实现下:onchange="change()"

function change(){
		var seach=document.getElementsByName("each");
		for(var i=0;i<seach.length;i++){
			seach[i].checked=!seach[i].checked;
		}		
	}
最后,对复选框的最常用的就是获取某一列的信息,从而实现传值,这里我们来获取下值:

var seach=document.getElementsByName("each");
for(var i=0;i<seach.length;i++){
if(seach[i].checked){
alert(seach[i].value);
}
}

不知道自己究竟坚持的是什么了,这样重新编写一遍的话,效果上来说,实在没有第一遍来的那么好,不管那么多了,加油吧,菜鸟飞飞飞....



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值