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();
});

注意:event handler for toggle已弃用，而不是 version which simply swaps visibility .