在HTML中当我选中一些checkbox按钮后如何将其中的值在text或下拉框中...

发布网友发布时间：2022-05-16 03:08

共1个回答

热心网友时间：2022-04-26 16:12

这种效果可以用JS来完成，如果用jQuery来实现就更容易了。这里就只模拟着给出个原生JS版本的吧。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Test</title>
<script type="text/javascript">
function addToTarget(){
var opts = document.form1.equipmentTypeFrom;
var chks = new Array();
var index = 0;
document.form1.equipmentTypeTarget.options.length=0; //每次勾选前先把之前的option清掉
for(var i=0;i<opts.length;i++){
if(opts[i].checked == true){
document.form1.equipmentTypeTarget.options[index] = new Option(opts[i].value, opts[i].value);
index++;
}
}
}
</script>
<style type="text/css">
body{
margin:0;
padding:0;
text-align:center;
background:#cdcdcd;
}
.container{
text-align:left;
width:720px;
height:auto;
font-size:12px;
margin:20px auto;
padding:100px;
border:1px solid green;background:#F5F5F5;
}
</style>
</head>
<body>
<div class="container">
<form name="form1" action="#" method="post">
<div>
防火墙数量
<select name="firewallCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
设备类型
<input type="checkbox" name="equipmentTypeFrom" value="7200" onclick="addToTarget();"/>7200
<input type="checkbox" name="equipmentTypeFrom" value="3620" onclick="addToTarget();"/>3620
<input type="checkbox" name="equipmentTypeFrom" value="3640" onclick="addToTarget();"/>3640
<input type="checkbox" name="equipmentTypeFrom" value="3600" onclick="addToTarget();"/>3600
<input type="checkbox" name="equipmentTypeFrom" value="2600" onclick="addToTarget();"/>2600
</div>
<div>
<fieldset>
设备类型<select name="equipmentTypeTarget"></select><br/>
ISO文件<input type="file" name="isoFile"/><br/>
idle-pc值<input type="text" name="idle-pcValue" /><input type="button" value="计算"/>
</fieldset>
<fieldset>
<legend>分布式配置</legend>
数量<select name="count"></select>
PC<select name="pc"></select>
IP<input type="text" name="ip"/>
blah~~~blah~~blah~~后面的就不写了
</fieldset>
</div>
</form>
</div>
</body>
</html>