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);
}
}

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

时间: 2024-12-05 23:51:29

js实现复选框的操作-------Day41的相关文章

EasyUI设置复选框单选操作

Html 代码: <td align="left" colspan="2">                    <input type="checkbox" name="SEX" value="0" />未知的性别                    <input type="checkbox" name="SEX" value=&

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

JS 设置复选框的选中与取消选中

// 设置选中 function setCheckboxClick(obj) { if(obj == null) { $.messager.alert('警告', "请选择要设置选中的项!",'warning'); } // alert(obj.value); var authorityId = obj.value; $.ajax({ type: 'post', url: 'getAuthorityByAuthorityId.action', data: {"authorit

js获取复选框值

//js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值 for(var i=0;i<obj.length;i++){ if(obj[i].checked) //取到对象数组后,我们来循环检测它是不是被选中 s+=obj[i].value+','; //如果选中,

复选框相关操作

效果图: js代码: 第一步:请求数据 $.ajax({ type: 'get', async:false, url: "../../Ashx/GetMeeting.ashx?time="+new Date(), //data: { pageSize: Pagination.pageSize, pageIndex: Pagination.pageIndex }, success: function (result) { var data = JSON.parse(result);//e

js实现复选框的全选、全不选、反选

js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

JS function 复选框

function三种写法 1.$(document).ready(function(){}) 2.$().ready(function(){}) 3.$(function(){}) (前面两种的简写) html复选框 <tr> <td style="width:30%" align="left"> <input type="checkbox" id="btnAgents" name="b

使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询

这是界面代码: ? function shua(){             var id_array=new Array();         $('input[id="checkAll"]:checked').each(function(){         id_array.push($(this).val());//向数组中添加元素         });  //获取界面复选框的所有值              var chapterstr = id_array.join(',