获取多个checkbox值给text

最新推荐文章于 2020-05-19 16:37:22 发布

原创最新推荐文章于 2020-05-19 16:37:22 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XHTML #J# #HTML

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文展示了一个简单的HTML页面如何通过JavaScript实现与用户输入的交互功能。页面包含一个表格，表格中有复选框和文本框，通过JavaScript函数控制复选框的选择状态并更新文本框的内容。此外还提供了显示和隐藏iframe的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function iframeDiplay(){

	document.getElementById('inId').style.display="none";
	document.getElementById('ifId').style.visibility="visible";
}
function inputOndisplay(){

	document.getElementById('ifId').style.visibility="hidden";
	document.getElementById('inId').style.display="";
}
function testValue(checkboxName,textName){
	var cValue = document.getElementById(checkboxName).value;
	var textObj = document.getElementById(textName);

	var newArr = new Array();
	if(document.getElementById(checkboxName).checked == true){

		textObj.value = textObj.value +"," + cValue;	
	}else{

		newArr = textObj.value.split(",");

		for(var i=1;i<=newArr.length-1;i++){
			if(cValue == newArr[i]){

				if(newArr.length <= 2){
					var nullArr = new Array();			
					newArr=nullArr ;
				}else{
					newArr.splice(i,1);	
				}
			}
		}

		if(newArr.length ==0){
			textObj.value = "";
		}else{
			for(var j=1;j<newArr.length;j++){
				textObj.value = "";
				textObj.value = textObj.value +","+ newArr[j];

			}
		}
	}

	//alert('---'+textObj.value);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="inId" style="">
			 <table>
				 <tr >
					<td><input id="c1" name="c1" type="checkbox" value="1" onclick="testValue('c1','valueDisplay')"/></td>
					<td><input id="c2" name="c2" type="checkbox" value="2" onclick="testValue('c2','valueDisplay')"/></td>
					<td><input id="valueDisplay" name="valueDisplay" type="text" value="" /></td>
				 </tr>
			 </table>
</div> 
<table>
	<tr>
		<td><a href="javascript:iframeDiplay();">iframe_display</a></td>
		<td><a href="javascript:inputOndisplay();">hiddenIframe</a></td>
	</tr>
	<tr>
		<td>
			<div id="ifId" style="visibility:hidden" >
				<table width="200" border="1" >
				  <tr >
					<td><iframe src="" id="abch"/></td>
				  </tr>
				 </table>
			</div>
		</td>
	</tr>
	<tr>
		<td>

		</td>
	</tr>

</table>

<br/>
</body>
</html>