文档章节

有关复选框的操作,如何获取多选id,

阿布布0410
 阿布布0410
发布于 2016/06/07 16:55
字数 540
阅读 21
收藏 0

    

经常会碰到一些操作复选框的案例,比如多选,全选,反选等等,整理了一下,分享出来, 同时

还有如何获取选择多条数据时,id的处理问题。即如何拿到多条数据的id。


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框全选全清和反选</title>
<script type="text/javascript">

//取得所有的复选框对象数组


function GetAllCheckBox() {
  var div = document.getElementById("Balls");
  var inputs = div.getElementsByTagName("input");
  //定义复选框数组,用来返回
  var checkboxs = new Array();
  var nIndex = 0;
  for (var i = 0; i < inputs.length; i++) {
 //通过type是否为checkbox来判断复选框
 if (inputs[i].type == "checkbox") {
   checkboxs[nIndex] = inputs[i];
   nIndex++;
 }
  }
  return checkboxs;
}



//全选
function selAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = true;
  }
}



//全清
function clearAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = false;
  }
}



//反选
function reverseAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 if (checkboxs[i].checked == true) {
   checkboxs[i].checked = false;
 }
 else {
   checkboxs[i].checked = true;
 }
  }
}


</script>
</head>
<body>
<div id="Balls">
<input type="checkbox" id="c1" /><label for="c1">足球</label>
<input type="checkbox" id="c2" /><label for="c2">台球</label>
<input type="checkbox" id="c3" /><label for="c3">乒乓球</label>
<br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全清" onclick="clearAll()" />
<input type="button" value="反选" onclick="reverseAll()" />
</div>
</body>
</html>



<!--
/******************************************************************************************/


   /*
    *选择多条数据,如何获取id
    *
	*获取所有选中id
	*选择多个数据时,获取所选择的所有id,并将id返回
	*将id全部拿到,并用 ","拼起来,使用的时候,用split()方法劈开,放到数组中或集合中遍历使用
	*/
-->

	function getAllids(){
        //得到chekbox对象
		var checkbox = document.getElementsByName("id");
		//alert("checkbox的长度为:"+checkbox.length);
		var id ="";
        //当选中时,拿到它的value值,并拼起来
        //需要注意的是,这样拼出来的id字符串,是以 ","结尾的,所以在使用的时候,应先将 ","去掉,也可在if中做判断
        // 当为最后一个时,拼的时候不加 ","
		for ( var i = 0; i < checkbox.length; i++) {
			if(checkbox[i].checked){
				id = id + checkbox[i].value+",";
			}
		}
		//alert("id为:"+id);
		return id;
	}









 

© 著作权归作者所有

阿布布0410
粉丝 0
博文 3
码字总数 1638
作品 0
西安
程序员
私信 提问
JqGrid做翻页三

【适用范围】:web系统中的页面对应含有对象区表格数据选择 1.记录翻页后前页的所选行状态 2.点击非含复选框单元格的单元格触发单击事件 3.点击含复选框的单元格为多选模式 4.单选后对应行复...

Wacher
2016/12/20
22
0
JqGrid做翻页二

【适用范围】:web系统中的页面对应含有对象区表格数据选择 1.记录翻页后前页的所选行状态 2.点击非含复选框单元格的单元格触发单击事件 3.点击含复选框的单元格为多选模式 4.单选后对应行复...

Wacher
2016/12/20
10
0
jquery 表单取值常用代码

jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1"......

夏日晚晴天
2014/01/16
111
2
vue如何按需要生成表单?大神们说下思路。

是这样,现在有一个窗口中很多CheckBox的复选框,现在能实现的是选中一个复选框,就可以生成相对应的一个数据存入数据库,然后这个数据ID与一个html网页绑定,所以在页面中,点击这个数据时,...

MEChi
03/19
118
0
jquery获取表单值的一些简单操作汇总

var mykindtxt=$("#kind option:selected").text();//获取表单selected 选中文本内容 jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面: <inpu......

小样
2012/02/17
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 开发语言和语言开发的能一样么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌:#今日歌曲推荐# 分享The Score的单曲《Revolution》 《Revolution》- The Score 手机党少年们想听歌,请使劲儿戳(这里) @批判派...

小小编辑
今天
1K
16
oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
3
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
3
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部