javascript隐藏显示元素复选框

时间:2015-08-18 07:55:57

标签: javascript jquery checkbox

我有8个复选框,默认情况下只检查其中一个。

当你点击两次未经检查的表格时(复选框也被链接)隐藏。

理想情况下,我需要默认隐藏未经检查的那些,并且默认显示已选中的一个。然后显示然后检查等。

这是javascript代码

function showhide(el, target) {
    document.getElementById(target).style.display = el.checked ? 'block' : 'none';
}

这是html

<th><input onclick="showhide(this, '1')" type="checkbox"> 1 </th>
<td><input onclick="showhide(this, '3')" type="checkbox" checked> 3 </td>

2 个答案:

答案 0 :(得分:0)

您的复选框没有ID,您的HTML应该是

 <th><input onclick="showhide(this, '1')" type="checkbox" id="1"> 1 </th>
 <td><input onclick="showhide(this, '3')" type="checkbox" id="3"> 3 </td>

答案 1 :(得分:0)

我认为你所追求的是设置默认显示

function showhide(el) {
  document.getElementById(el.dataset.target).style.display = el.checked ? 'block' : 'none';
}

function showhideclick() {
  showhide(this);
}

var checks = document.getElementsByClassName('showhide'),
  chk;
for (var i = 0; i < checks.length; i++) {
  showhide(checks[i]);
  checks[i].addEventListener('click', showhideclick, i)
}
<tr>
  <th><input class="showhide" data-target="1" type="checkbox"/> 1 </th>
  <td><input class="showhide" data-target="3" type="checkbox" checked/> 3 </td>
</tr>

<div id="1">1</div>
<div id="3">3</div>