`

js复选框全选和消选并取值

CC++C#HTML 
阅读更多 
<html>
  <head>   
<script>
//a:CHECKBOX集合的NAME,b:全选按钮ID,c:消选按钮的ID,d:串值的文本框ID
function selectAll(a,b,c,d){
	var allObj = document.getElementsByName(a);//通过NAME得到CHECKBOX集合
	for(var i=0; i<allObj.length; i++){
		if(!allObj[i].checked){
			allObj[i].checked = true;
		}
	}
	var allSelObj = document.getElementById(b);//全选按钮对象
	var allCanObj = document.getElementById(c);//消选按钮对象
	allSelObj.checked = true;
	allCanObj.checked = false;
	//将选中的值存串入文本框中
	var ctext = document.getElementById(d);
	ctext.value = "";
	for(var i=0; i<allObj.length; i++){
		ctext.value += allObj[i].value+"-";
	}
}

//a:CHECKBOX集合的NAME,b:全选按钮ID,c:消选按钮的ID,d:串值的文本框ID
function cancelAll(a,b,c,d){
	var allObj = document.getElementsByName(a);//通过NAME得到CHECKBOX集合
	for(var i=0; i<allObj.length; i++){
		if(allObj[i].checked){
			allObj[i].checked = false;
		}
	}
	var allSelObj = document.getElementById(b);//全选按钮对象
	var allCanObj = document.getElementById(c);//消选按钮对象
	allSelObj.checked = false;
	allCanObj.checked = true;
	//将选中的值存串入文本框中
	var ctext = document.getElementById(d);
	ctext.value="";
}

//a:CHECKBOX集合的NAME,b:全选按钮ID,c:消选按钮的ID,d:串值的文本框ID
function changeOne(a,b,c,d){
	var allObj = document.getElementsByName(a);//通过NAME得到CHECKBOX集合
	var num = 0;//全选个个数
	for(var i=0; i<allObj.length; i++){
		if(allObj[i].checked){
			num++;
		}
	}
	var allSelObj = document.getElementById(b);//全选按钮对象
	var allCanObj = document.getElementById(c);//消选按钮对象
	if(num == allObj.length){//全选中了
		allSelObj.checked = true;
		allCanObj.checked = false;
	}else if(num == 0){//全没选中
		allSelObj.checked = false;
		allCanObj.checked = true;
	}else {//有选中的和没选中的
		allSelObj.checked = false;
		allCanObj.checked = false;
	}
	//将选中的值存串入文本框中
	var ctext = document.getElementById(d);
	ctext.value = "";
	for(var i=0; i<allObj.length; i++){
		if(allObj[i].checked){
			ctext.value += allObj[i].value+"-";
		}
	}
}
</script>
  </head>
  <body> 
  全选 <input type="checkbox" id="allSelect"  onclick="selectAll('abc','allSelect','allCancel','ctext')"/> 
  <br>
  消选 <input type="checkbox" id="allCancel"  onclick="cancelAll('abc','allSelect','allCancel','ctext')"/> 
  <br>
    <input type="checkbox" id="abc1" name="abc" value="a1" onclick="changeOne('abc','allSelect','allCancel','ctext')"/> abc1
    <input type="checkbox" id="abc2" name="abc" value="b1" onclick="changeOne('abc','allSelect','allCancel','ctext')"/> abc2
    <input type="checkbox" id="abc3" name="abc" value="c1" onclick="changeOne('abc','allSelect','allCancel','ctext')"/> abc3
    <input type="checkbox" id="abc4" name="abc" value="d1" onclick="changeOne('abc','allSelect','allCancel','ctext')"/> abc4
    <input type="checkbox" id="abc5" name="abc" value="e1" onclick="changeOne('abc','allSelect','allCancel','ctext')"/> abc5
    <br>
    复选框值 <input type="text" id="ctext" name="checkValue" />
    <input type="submit" value="提交"/>
  </body>
</html>

 

将复选框中的值串成串存入文本框中,在将文本框中的值传到后台,在后台使用java的split()方法分解得到所选中的复选框的值

 

 

分享到：
| MySQL时间日期相关函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics