首页 > 代码库 > js实现复选框的操作-------Day41

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

2024-10-04 03:24:40   215人阅读

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

无论了，又一次写了这篇，也算是加深记忆吧。

首先要写的是今天在进行表格数据操作时用到的对复选框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="http://www.mamicode.com/1"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="http://www.mamicode.com/2"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="http://www.mamicode.com/3"></td>
	    	</tr>
	    	<tr>
	    		<td><input type="checkbox" name="each" value="http://www.mamicode.com/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);
}
}

不知道自己到底坚持的是什么了。这样又一次编写一遍的话，效果上来说，实在没有第一遍来的那么好。无论那么多了，加油吧，菜鸟飞飞飞....

技术分享

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


联系
我们