Question

javascript 循环显示输出的时候， 展开隐藏的问题

我从数据库读出姓名，学号，并通过循环输出到前台，我想通过checkbox来实现姓名的展开和隐藏，但是我下面的写法只能实现第一个姓名的展开和隐藏，请问是哪里出的问题？
<input type="checkbox" name="check_s" id="check_s" onclick="check(this.id)" />
{{for s in test:}}
<div id="show_hidden" >{{=XML(s.name)}}</div>
{{pass}}
function check(action){
var b = document.getElementById(action);
if (b.checked==true)
{
document.getElementById("show_hidden").style.display='block';

}
else
{
document.getElementById("show_hidden").style.display='none';

}
}

Answer 1

因为你的check函数始终是控制document.getElementById("show_hidden")的显示开关，这样所有的checkbox都控制第一个，要让每个checkbox控制自己的的内容，那么要修改三个地方：每个checkbox的id、每个div的id、check函数，例如可以这样：

<input type="checkbox" name="check_s" id="check_s1" onclick="check(this.id)" />
{{for s in test:}}
<div id="show_hidden_check_s1" >{{=XML(s.name)}}</div>
{{pass}}
function check(action){
var b = document.getElementById(action);
if (b.checked==true)
{
document.getElementById("show_hidden_"+action).style.display='block';

}
else
{
document.getElementById("show_hidden_"+action).style.display='none';

}
}

①
<input type="checkbox" name="check_s" id="check_s1" onclick="check(this.id)" />

②
<div id="show_hidden_check_s1" >{{=XML(s.name)}}</div>

③
document.getElementById("show_hidden_"+action).style.display='block';
document.getElementById("show_hidden_"+action).style.display='none';

Answer 2

首先
你有一个大的错误 id 肯定是唯一性的，所以即使你写了多个一样的id，只会获取到第一个
处理方法
1 给checkbox一个对应的唯一性id ,对应的div 也是同理，这在循环输出的时候很好处理，
比如
check_s0,show_hidden0;
check_s1,show_hidden1
只需要传 0,1这些编号，再去拼接对应的id
2 直接利用javascript，把 onclick="check(this.id)" 改为 onclick="check(this)"
得到这个对象（obj）后得到
var checks = document.getElementsByName("check_s");
var divs = document.getElementsByName("show_hidden");
for(var =0;i<checks.length;i++) {
if(checks[i]==obj) {
//对应你的处理 if (checks[i].checked) { //divs[i].style.displa='block'} else {//none}
}
}