如何使用单选按钮值键显示/隐藏隐藏的div

Question

我有这样的代码：

<div id="info_123" style="display:none;">
<input type="text" name="info">
</div>

<input type="radio" value="123">
<input type="radio" value="456">
<input type="radio" value="789">

如果我单击value="123“显示的单选按钮，单击带有value="456”或value="789“的单选按钮，则该div隐藏。(key=选中单选按钮的值)

我的问题是:如何用javascript代码显示/隐藏带有单选按钮值的隐藏div？

英语不好，抱歉..。

Answer 1

$(":input[type='radio']").on("change", function () {
    if ($(this).prop("checked") && $(this).val() != 123)
        $("#info_123").hide();
    else
        $("#info_123").show();
});

尝尝这个。

此处的小提琴链接：http://jsfiddle.net/hXE2X/

或者您可以使用这个选项，它将显示div，这取决于所检查的收音机。

$(":input[type='radio']").on("change", function () {
    $('div[id^=info_]').hide();
    if ($(this).prop("checked")){
        var checkedRadio = '#info_' + $(this).val();
        $(checkedRadio).show();
    }
});

HTML：

<div id="info_123" style="display:none;">
    <input type="text" name="info" value="123" />
</div>
<div id="info_456" style="display:none;">
    <input type="text" name="info" value="456" />
</div>
<div id="info_789" style="display:none;">
    <input type="text" name="info" value="789" />
</div>
<input type="radio" name="radios" value="123">
<input type="radio" name="radios" value="456">
<input type="radio" name="radios" value="789">

小提琴链接：http://jsfiddle.net/hXE2X/1/

Answer 2

尝尝这个

     $(".radiobuttonclass").on("change",function(){
     if($(this).prop("checked"))
        $("#info_123").hide();     
     else 
    $("#info_123").show();
    });

Answer 3

编辑：问题似乎要求在JavaScript中找到解决方案。JQuery解决方案要优雅得多，在大多数情况下可能是首选的。然而，这个答案只使用JavaScript。

<div id="info_123" style="display:none;">
<input type="text" name="info">
</div>

<input type="radio" name="radios" value="123">
<input type="radio" name="radios" value="456">
<input type="radio" name="radios" value="789">

<script>
function() {
  var radio_list = document.forms[0].elements["radios"];
  for (var i = 0; i < radios.length; i++)
    radios_list[i].onclick=radio_onClick;
}

function radio_onClick() {
      document.getElementById('info_123').style.visibilty='visible'

}
</script>