如何使用複選框交換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