js复选框全选跟消选并取值
日期：2014-05-16 浏览次数：20411 次
js复选框全选和消选并取值
<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()方法分解得到所选中的复选框的值
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
