Question

我有两个div，比如

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

  });

for document.getElementById ...你可以编写一些包装器

注意：我的示例它只显示如何使用原生javascript ...生产我建议拆分事件，操作等逻辑并使用Backbone :)

Answer 2

是的，有可能！

添加例如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()

如何通过使用javascript单击单选按钮来隐藏和显示div？

4 个答案: