`

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()方法分解得到所选中的复选框的值

 

 

分享到:
评论

相关推荐

    javascript复选框实现批量选择

    2. 在列表下方放置一个“全选/全不选”复选框,当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”复选框后,列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后,...

    layui-table表复选框勾选的所有行数据获取的例子

    需要注意的是,在实际应用中,复选框的实现方式可能会根据项目的具体需求略有不同,但核心逻辑是相同的,即监听复选框的变化并获取选中的行数据。希望本文能够帮助到正在使用layui-table进行开发的朋友们,解决他们...

    复选框的使用

    例如,在JavaScript中,你可以使用`addEventListener`来添加事件监听器,`event.target.checked`来获取复选框的当前状态,`Array.from`和`.map`来遍历和操作复选框数组。在Java Swing中,可以使用`ActionListener`...

    jQuery操作复选框(CheckBox)的取值赋值实现代码

    这些jQuery操作对于处理复选框的值和状态非常实用,它们大大简化了JavaScript中的DOM操作,提高了开发效率。在实际应用中,根据需求组合使用这些方法,可以灵活地管理复选框的状态和数据。在网页交互和表单处理中,...

    zTree实现多选下拉框

    1. **配置zTree的多选功能**:在zTree的初始化配置中,需设置`check.enable = true`以启用复选框功能。此外,`check.chkStyle`属性通常设置为"checkbox",表示使用标准的复选框样式。同时,还可以通过`check....

    layui checkbox默认选中,获取选中值,清空所有选中项的例子

    然后,在JavaScript中,我们可以使用jQuery选择器找到这些checkbox,并设置它们的`checked`属性为`true`来实现默认选中。例如,如果我们希望选中值为1和3的项,可以这样操作: ```javascript var selectedValues = ...

    jQuery操作CheckBox的方法介绍(选中,取消,取值)

    在本文中,我们将深入探讨如何使用jQuery来操作CheckBox(复选框)元素,包括选中、取消选中和获取选中项的值。 首先,我们需要确保页面中已经引入了jQuery库。在示例代码中,通过以下方式引入了jQuery: ```html ...

    Html\checkbox)属性解析及应用.docx

    35. Value 属性:该属性用于设置复选框处在什么状态,复选框控件有三种状态:0 未选定、1 选定、2 灰色。 36. Visible 属性:该属性用于设置此对象的可见性,取值为:True 可见、False 不可见。 37. ...

    aspx中checkboxList扩展

    它允许用户从一组可选的复选框中选择一个或多个选项。然而,原生的CheckboxList控件功能有限,有时可能无法满足复杂的业务需求。为了解决这个问题,开发者们通常会对其进行扩展,增加更多的功能和灵活性。 “aspx中...

Global site tag (gtag.js) - Google Analytics