取消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>
2 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
直接重写了一个，看下是不是这效果
<!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从小到大重新排序
添加回答
举报
0/150
提交
取消