how to display/hide a hidden div with radio button values key

Question

I have code like this:

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

if I click radio button with value="123" that div show, and if I click radio button with value="456" or value="789", that div hidden.(key = values of checked radio button)

my question : how to display/hide a hidden div with radio button values key with javascript code?

Bad english, sorry..

Answer 1

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

Try this.

Fiddle link here: http://jsfiddle.net/hXE2X/

Or you can use this which will show div depending on the radio checked.

$(":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">

Fiddle link: http://jsfiddle.net/hXE2X/1/

Answer 2

Try this

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

Answer 3

EDIT: Question seemed to be asking for a solution in JavaScript. The JQuery solution is much more elegant and probably to be preferred in most cases. However this answer uses only 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

You have to do write javascript for this. You can either choose pure javascript or use Jquery to achive this.

In pure Javascript you can do like this.

<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

Here's a working JSFiddle: http://jsfiddle.net/Dtj82/1/

I'm using jQuery to simplify binding event handlers to the radio button change event and to toggle the div, but this could be done with vanilla JS as well.

Here's the 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>

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