<input id="Checkbox1" name="ZGXZ" type="checkbox" οnclick="switchdiv();" >
<label for="Checkbox1">
人员信息</label>
<input id="Checkbox2" name="ZGXZ" type="checkbox" οnclick="switchdiv();" >
<label for="Checkbox2">
学历信息</label>
<input id="Checkbox3" name="ZGXZ" type="checkbox"οnclick="switchdiv();" >
<label for="Checkbox3">
晋升信息</label>
<input id="Checkbox4" name="ZGXZ" type="checkbox"οnclick="switchdiv();" >
<label for="Checkbox4">
科室信息</label>
<input id="Checkbox5" name="ZGXZ" type="checkbox"οnclick="switchdiv();" >
<label for="Checkbox5">
学术活动</label>
这是5个checkbox,分别对应以下5个div
<div id="xm1" style="display:block;">
<h1 align="center">人员信息</h1>
<table id="table" style="margin: auto; text-align: center;" class="form">
<tr>第一个
</tr>
</table>
</div>
<div id="xm2" style="display:block;">
<h1 align="center">学历信息</h1>
<table id="table1" style="margin: auto; text-align: center;" class="form">
<tr>
第二个</tr>
</table>
</div>
<div id="xm3" style="display:block;">
<h1 align="center">晋升信息</h1>
<table id="table2" style="margin: auto; text-align: center;" class="form">
<tr>
第三个
</tr>
</table>
</div>
<div id="xm4" style="display:block;">
<h1 align="center">科室信息</h1>
<table id="table3" style="margin: auto; text-align: center;" class="form">
<tr>第四个</tr>
</table>
</div>
<div id="xm5" style="display:block;">
<h1 align="center">学术活动</h1>
<table id="table4" style="margin: auto; text-align: center;" class="form">
<tr>第五个</tr>
</table>
</div>
以下为checkbox的点击事件:
<script type="text/javascript">
function switchdiv() {
for (var i = 1;; i++) {
var ele = document.getElementById('xm' + i);
var ck = document.getElementById('Checkbox' + i);
if (!ele) {
break;
}
else {
if (ck.checked) {
ele.style.display = 'block';
}
else {
ele.style.display = 'none';
}
}
}
}
</script>
over……
另附上我之前查到的参考资料,写的也很好,以后可能会用到:
http://bbs.blueidea.com/thread-3064938-1-1.html
https://www.cnblogs.com/lwx521/p/7616784.html
http://bbs.csdn.net/topics/390885802