如何使用复选框交换DIVS

Question

我一直试图找到一种方法来交换（切换）选中复选框时div的显示，并在未选中复选框时返回原始div。

JQuery切换似乎是完美的，但现在已被折旧。所以我怀疑纯粹的javascript方法可能是最好/最简单的。

任何帮助都会受到大力赞赏。

谢谢，

瑞克

<input name="checkbox" type="checkbox" value="checkbox">Show Hidden Div ?</p>
<div id="layerOne">This DIV is shown by default and hidden when the checkbox is checked</div>
<div id="layerTwo">This DIV is hidden by default and shown when the Checkbox is checked</div>

Answer 1

的 jsFiddle Demo 的

只需使用点击处理程序和切换

即可

$("#layerTwo").hide();
$("input[name=checkbox]").click(function(){
 $("#layerOne, #layerTwo").toggle();
});

注意：不推荐使用event handler for toggle，而不是version which simply swaps visibility。

Answer 2

纯粹的javascript方法

的的javascript 的

 var button = document.getElementById('toggle'),
        text = document.getElementById('text');

    button.onclick = function() {
      var isHidden = text.style.display == 'none';
      text.style.display = isHidden ? 'block' : 'none';
    };

的 HTML 的

 <button id="toggle">Toggle</button>
  <div id="text">Lorem ipsum dolor sit amet.</div>

DEMO