隐藏显示元素复选框

javascript hide show element checkbox

本文关键字：复选框 元素 显示 隐藏      更新时间：2023-09-26

我有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>

我想你想要的是设置默认显示

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>

你的复选框没有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>
相关文章：