Javascript 如何使用复选框交换div

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

jquerytoggle似乎非常适合这一点，但现在已经被贬低了。因此我怀疑纯javascript方法可能是最好/最简单的

任何帮助都将不胜感激

谢谢

瑞克

显示隐藏的Div

默认情况下会显示此DIV，选中此复选框时将其隐藏
默认情况下，此DIV是隐藏的，并在选中复选框时显示

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

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

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

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

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

注意：已弃用，而不是。

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

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

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

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

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

---

注意：不推荐使用.p>纯javascript方法

javascript

html

切换
Lorem ipsum dolor sit amet。

---

纯javascript方法

javascript

html

切换
Lorem ipsum dolor sit amet。

@putvande@putvande