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">

如果我点击带有值=＆＃34; 123＆＃34;的单选按钮; div显示，如果我单击单选按钮值为＆＃34; 456＆＃34;或值=＆＃34; 789＆＃34;，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>

Answer 4

你必须为此编写javascript。您可以选择纯javascript或使用Jquery来实现此目的。

在纯Javascript中你可以这样做。

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

<input name="valueSelect" type="radio" value="123" onclick='return onRadioSelect(this);'  />
<input name="valueSelect" type="radio" value="456" onclick='return onRadioSelect(this);' />
<input name="valueSelect" type="radio" value="789" onclick='return onRadioSelect(this);' />

<script language="javascript">
function onRadioSelect(obj) {
    var selectedValue = obj.value;
    if (selectedValue == "123") {
        document.getElementById('info_123').style.display = 'block';
    }
    else if (selectedValue == "456") {
       // your code
    }        
}
</script>

Answer 5

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

<form action="">
<input type="radio" id="1" name="display" value="1">show<br>
<input type="radio" id ="0" name="display" value="0">hide
</form>

jquery：

$("input:radio").change(function(){
if ($("#1").prop("checked")) 
{
$("#info_123").show();
}
if ($("#0").prop("checked")) 
{
$("#info_123").hide();
}
})

jsfiddle

Answer 6

这是一个有效的JSFiddle：http://jsfiddle.net/Dtj82/1/

我正在使用jQuery简化绑定事件处理程序到单选按钮更改事件并切换div，但这也可以使用vanilla JS来完成。

这是HTML：

<form action="">
    <input id="show" type="radio" name="toggle" value="show" checked>Show<br>
    <input id="hide" type="radio" name="toggle" value="hide">Hide
</form>

<div id="toggle">
    This div will be toggled
</div>

和JS：

// Callback function for $(document).ready()
$(function() {
  // Bind a change event handler to the radio buttons whose name is toggle
  $('input[name=toggle]:radio').change(function () {
      // This code is executed whenever the radio buttons are clicked

      // See if the show button is clicked.  This will be a boolean
      var show = $('#show').is(':checked');
      // jQuery's toggle() method takes a boolean value to specifiy if we should show or hide the element (in this case, the div with id toggle)
      $('#toggle').toggle(show);
  });
});

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

6 个答案: