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


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

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

    首先要写的是今天在进行表格数据操作时用到的对复选框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);
    }
    }

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



  • 相关阅读:
    MySQL mysqldump数据导出详解
    FTP上传下载 C#辅助类
    FastDFS java 辅助类
    Ajax 提交表单【包括文件上传】
    bootstrap-table 基础用法
    MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
    jQuery实现鼠标移到元素上动态提示消息框效果
    给Jquery动态添加的元素添加事件
    centos7部署mysql5.7一主多从
    iOS浏览器 new Date() 返回 NaN
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/6979644.html
Copyright © 2020-2023  润新知