需求一个js 就是 选中多个 复选框 然后点击 按钮 才把选中的值 传到文本框里。。
选中复选框后 点击提交 才把值传到 文本框里面
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多个复选</title><style type="text/css">input{ margin-right:3px}label{margin:0 5px}</style><script type="text/javascript">window.onload = function(){ var obox = document.getElementById("box"); var cboList = obox.getElementsByTagName("input"); var oText = document.getElementById("tt"); document.getElementById("box").onclick = function(e){ var src = e?e.target:event.srcElement; if(src.tagName == "INPUT"){ var values = []; for(var i=0;i<cboList.length;i++){ if(cboList[i].checked){ values.push(cboList[i].value); } } oText.value = values.join(","); } }}</script></head><body><p><input type="text" id="tt" /></p><div id="box"> <label><input type="checkbox" value="a" />a</label> <label><input type="checkbox" value="b" />b</label> <label><input type="checkbox" value="c" />c</label> <label><input type="checkbox" value="d" />d</label> <label><input type="checkbox" value="e" />e</label> <label><input type="checkbox" value="f" />f</label></div><br /><br /><input name="" type="button" value="提交"/></body></html>
现在我只是选中就传值了，怎么改才能 点击提交后才传值。 展开
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多个复选</title>
<style type="text/css">
input{ margin-right:3px}
label{margin:0 5px}
</style>
<script type="text/javascript">
window.onload = function(){
var obox = document.getElementById("box");
var cboList = obox.getElementsByTagName("input");
var oText = document.getElementById("tt");
document.getElementById("count").onclick = function(e){
var src = e?e.target:event.srcElement;
if(src.tagName == "INPUT"){
var values = [];
for(var i=0;i<cboList.length;i++){
if(cboList[i].checked){
values.push(cboList[i].value);
}
}
oText.value = values.join(",");
}
}
}
</script>
</head>
<body>
<p><input type="text" id="tt" /></p>
<div id="box">
<label><input type="checkbox" value="a" />a</label>
<label><input type="checkbox" value="b" />b</label>
<label><input type="checkbox" value="c" />c</label>
<label><input type="checkbox" value="d" />d</label>
<label><input type="checkbox" value="e" />e</label>
<label><input type="checkbox" value="f" />f</label>
</div>
<br /><br />
<input id="count" name="" type="button" value="提交"/>
</body>
</html>
我修改了两个地方
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var arr = new Array();
var btnObj = document.getElementById("btn");
btnObj.onclick = function() {
var chks = document.getElementsByName("checkboxes");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
arr.push(chks[i].value);
}
}
document.getElementById("checkboxValues").value = arr.join(" | ");
};
};
</script>
</head>
<body>
<input type="text" value="" id="checkboxValues" />
<br/>
<input type="checkbox" name="checkboxes" value="1">
<input type="checkbox" name="checkboxes" value="2">
<input type="checkbox" name="checkboxes" value="3">
<br/>
<input type="button" id="btn" value="click" />
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var obox = document.getElementById("box");
var cboList = obox.getElementsByTagName("input");
var oText = document.getElementById("tt");
var btn = document.getElementByName('btn');//给按钮加个name名btn
btn[0].onclick = function(e){
var values = [];
for(var i=0;i<cboList.length;i++){
if(cboList[i].checked){
values.push(cboList[i].value);
}
}
oText.value = values.join(",");
}
}
</script>
