javascript - 用javascript隐藏div类

Question

我想让复选框隐藏和显示一个 div 类。

到目前为止，我的代码隐藏了 div 但没有显示它。我知道我做错了!我确实有多个复选框

这是我的代码

    <script type="text/javascript">
    function show(target) {
  document.getElementById(target).style.display = 'block';
}

function hide(target) {
  document.getElementById(target).style.display = 'none';
}
    </script>
    <tr>
    <th><input onclick="hide('tester')" type="checkbox" checked>

我知道它与 onclick 隐藏有关。将它作为切换开关会更好吗？

山姆

Answer 1

您需要使用一个单独的处理程序，在该处理程序中，您可以根据检查状态设置显示值，例如

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

<input onclick="showhide(this, 'tester')" type="checkbox" checked />
<div id="tester">tester</div>

---

使用jQuery

$('#mycheckbox').change(function() {
  $('#tester').toggle(this.checked)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mycheckbox" type="checkbox" checked />
<div id="tester">tester</div>