javascript - 如何使用复选框交换 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();
});

注意：不推荐使用toggle的事件处理程序，而不是简单地交换可见性的版本。

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>

演示