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

最新推荐文章于 2021-06-22 22:40:15 发布

chuquanliu3518

最新推荐文章于 2021-06-22 22:40:15 发布

阅读量319

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xwk0410/blog/688319

版权

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

还有如何获取选择多条数据时，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;
	}

转载于:https://my.oschina.net/xwk0410/blog/688319

chuquanliu3518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关复选框的操作，如何获取多选id，

经常会碰到一些操作复选框的案例，比如多选，全选，反选等等，整理了一下，分享出来，同时还有如何获取选择多条数据时，id的处理问题。即如何拿到多条数据的id。 <head><meta http-equiv="Content-Type" content="t...
复制链接

扫一扫