如何使用單選按鈕值鍵顯示/隱藏隱藏的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">

如果我單擊div顯示的值為=“ 123”的單選按鈕，並且如果我單擊value =“ 456”或value =“ 789”的單選按鈕，則該div隱藏。（鍵=已選中的單選按鈕的值）

我的問題：如何使用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的方法，但這也可以通過香草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);
  });
});