JavaScript复选框特效

Question

表单内有五个复选框，当第一次单击选中复选框时其后面出现数字1，第二次单击选中出现数字2，以此类推；当第一次的为不选中情况时数字1 不显示，第二次单击选中的出现1，以此类推。求JavaScript怎样实现？

Answer 1

类似的，自己改改吧：
<input type="checkbox" id="1" onclick="fun(this)"><span id="span1"></span>
<input type="checkbox" id="2" onclick="fun(this)"><span id="span2"></span>
<input type="checkbox" id="3" onclick="fun(this)"><span id="span3"></span>
<input type="checkbox" id="4" onclick="fun(this)"><span id="span4"></span>
<input type="checkbox" id="5" onclick="fun(this)"><span id="span5"></span><script language="javascript">
function fun(box){
if(box.checked){
document.getElementById("span" + box.id).innerHTML = box.id;
}else{
document.getElementById("span" + box.id).innerHTML = "";
}
}
</script>

Answer 2

<input type="checkbox" id="1" onclick="fun(this)"><span id="span1" style="display:none;">1</span>
<input type="checkbox" id="2" onclick="fun(this)"><span id="span2" style="display:none;">2</span>
<input type="checkbox" id="3" onclick="fun(this)"><span id="span3" style="display:none;">3</span>
<input type="checkbox" id="4" onclick="fun(this)"><span id="span4" style="display:none;">4</span>
<input type="checkbox" id="5" onclick="fun(this)"><span id="span5" style="display:none;">5</span><script language="javascript">
function fun(box){
if(box.checked){
document.getElementById("span" + box.id).style.display = "block";
}else{
document.getElementById("span" + box.id).style.display = "none";
}
}
稍改改，实现的方法很多。看你怎么做了

Answer 3

<input type="checkbox" value="1" onclick="fun(this)"><span id="span1"></span><BR>
<input type="checkbox" value="2" onclick="fun(this)"><span id="span2"></span><BR>
<input type="checkbox" value="3" onclick="fun(this)"><span id="span3"></span><BR>
<input type="checkbox" value="4" onclick="fun(this)"><span id="span4"></span><BR>
<input type="checkbox" value="5" onclick="fun(this)"><span id="span5"></span><script language="javascript">
function fun(box){
var sp = document.getElementById("span" + box.value);
if(box.checked){
if (sp.innerHTML == "") sp.innerHTML = 1;
else sp.innerHTML = parseInt(sp.innerHTML,10) +1;
sp.style.display = "";
}
else sp.style.display = "none";
}
</script>