直接重寫了一個(gè)，看下是不是這效果
<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<form>
????<input?type="checkbox"?value="語(yǔ)文">語(yǔ)文
????<input?type="checkbox"?value="數(shù)學(xué)"?>數(shù)學(xué)
????<input?type="checkbox"?value="英語(yǔ)"?>英語(yǔ)
????<input?type="checkbox"?value="物理"?>物理
????<input?type="checkbox"?value="化學(xué)">化學(xué)
????<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>補(bǔ)充一個(gè)用你的布局做的吧
<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<form>
????<input?type="checkbox"?value="語(yǔ)文"?onChange="check()">語(yǔ)文
????<input?type="checkbox"?value="數(shù)學(xué)"?onChange="check()">數(shù)學(xué)
????<input?type="checkbox"?value="英語(yǔ)"?onChange="check()">英語(yǔ)
????<input?type="checkbox"?value="物理"?onChange="check()">物理
????<input?type="checkbox"?value="化學(xué)"?onChange="check()">化學(xué)
????<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>但是后面這個(gè)點(diǎn)擊排序有點(diǎn)問(wèn)題，不是按照點(diǎn)擊的順序排而是按照原有的順序排，因?yàn)槟氵@個(gè)寫法是每次點(diǎn)擊后都要遍歷，就相當(dāng)于每次點(diǎn)擊都刷空innerHTML，然后i從小到大重新排序
