如何通過使用javascript單擊單選按鈕來隱藏和顯示div？

Question

我有兩個股利

<div id="exist">
<p>OK</p>
</div>

<div id="new">
    <p>Not OK</p>
</div>

我也有兩個單選按鈕

  <label class="radio">
    <input type="radio" name="optionsRadios" id="exist_radio" value="existing" checked="">Existing
  </label>
  <div style="clear:both"></div>
  <label class="radio">
    <input type="radio" name="optionsRadios" id="new_radio" value="new">New
  </label>

現在，我必須通過單擊單選按鈕僅顯示一個div。
如何在javascript中做到這一點？

Answer 1

  /* JS */
  window.onload    = (function(){

    var radio1      = document.getElementById('exist_radio');
    var radio2      = document.getElementById('new_radio');
    var div1        = document.getElementById('exist');
    var div2        = document.getElementById('new');

    //....

    var show = function(id)
    {
        id.style.display = 'block';
    }

    var hide = function(id)
    {
        id.style.display = 'none';
    }     

    hide(div1);
    hide(div2);

    radio1.onclick = function()
    {
        hide(div1);
        show(div2);
    }

    radio2.onclick = function()
    {
        hide(div2);
        show(div1);
    }

  });

對於document.getElementById ...，您當然可以編寫一些包裝器

注意：我的示例僅顯示了如何使用本機javascript ...對於生產而言，我建議拆分事件，操作等的邏輯並使用Backbone :)

Answer 2

對的，這是可能的！

向您獲得的每個onchange="show_div(this.id)"按鈕添加例如onchange="show_div(this.id)" 。 還寫一個像這樣的javascript函數：

function show_div(id)
{
    var exist_div = document.getElementById("exist");
    var new_div   = document.getElementById("new");

    if(id == "exist_radio")
    {
        exist_div.style.display = "block";
        new_div.style.display   = "none";
    }
    else if(id == "new_radio")
    {
        exist_div.style.display = "none";
        new_div.style.display   = "block";
    }
}

Answer 3

您可以在jQuery中很好地做到這一點：

  $(document).ready(function() {
    $('#exist').show();
    $('#new').hide();

    $('#exist_radio').on('click', function() {
           $('#new').hide();
           $('#exist').show();
    });

    $('#new_radio').on('click', function() {
           $('#new').show();
           $('#exist').hide();
    });
});

Answer 4

像這樣

事件：“ click .radio.input”：“ showDiv”

showDiv:(el)->
    kindOfDiv = el.target.value   
    if kindOfDiv is "existing"
        @$("#exist").show() 
        @$("#new").hide() 

    if kindOfDiv is "new"
        @$("#new").show() 
        @$("#exist").hide()