想要的效果是点击复选框的时候相应的value值在div显示出来
取消checkbox时相应的value值被抹去，点击几个复选框显示几value值不要重复；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="checkbox" value="语文" onChange="check()">语文
<input type="checkbox" value="数学" onChange="check()">数学
<input type="checkbox" value="英语" onChange="check()">英语
<input type="checkbox" value="物理" onChange="check()">物理
<input type="checkbox" value="化学" onChange="check()">化学
<input type="checkbox" value="生物" onChange="check()">生物
</form>
<div id="content"></div>
<script>
var content=document.getElementById("content");
var form=document.forms[0].elements;
content.innerHTML=null;
function check(){
//var cont=content.innerHTML;
for(var i=0;i<form.length;i++){
if(form[i].checked){
content.innerHTML+=form[i].value
}
}
}
</script>
</body>
</html>
Echo_Chien2回答
-
stone310
直接重写了一个，看下是不是这效果<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <form> <input type="checkbox" value="语文">语文 <input type="checkbox" value="数学" >数学 <input type="checkbox" value="英语" >英语 <input type="checkbox" value="物理" >物理 <input type="checkbox" value="化学">化学 <input type="checkbox" value="生物" >生物 </form> <div id="content"></div> <script> window.onload=function(){ var arr=[]; var oldText=""; var content=document.getElementById("content"); var input=document.getElementsByTagName("input"); for(var i=0;i<input.length;i++){ input[i].index=i; input[i].onclick=function(){ if(input[this.index].checked){ arr.push(input[this.index].value); content.innerHTML=arr.join(" ") ; //分割符可自定 oldText=oldText+input[this.index].value; }else if(input[this.index].checked==false){ for(var j=0;j<arr.length;j++){ if(arr[j]==input[this.index].value){ arr.splice(j,1); content.innerHTML=arr.join(" ") ; //分割符可自定 }; }; }; }; }; } </script> </body> </html>补充一个用你的布局做的吧<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <form> <input type="checkbox" value="语文" onChange="check()">语文 <input type="checkbox" value="数学" onChange="check()">数学 <input type="checkbox" value="英语" onChange="check()">英语 <input type="checkbox" value="物理" onChange="check()">物理 <input type="checkbox" value="化学" onChange="check()">化学 <input type="checkbox" value="生物" onChange="check()">生物 </form> <div id="content"></div> <script> var content=document.getElementById("content"); var form=document.forms[0].elements; function check(){ var oldT="" var allChecked=false; for(var i=0;i<form.length;i++){ if(form[i].checked){ content.innerHTML=oldT+form[i].value; oldT=oldT+form[i].value; allChecked=true; } } if(allChecked==false){ content.innerHTML=null; } } </script> </body> </html>但是后面这个点击排序有点问题，不是按照点击的顺序排而是按照原有的顺序排，因为你这个写法是每次点击后都要遍历，就相当于每次点击都刷空innerHTML，然后i从小到大重新排序 -
yemaa
这个value有没有显示出来的，这是后台获取选中数据的
随时随地看视频慕课网APP
相关分类
JavaScript