I'd like to hide/show a DIV based on the state of a radio button.

I know I can add a listener to the radio button and show/hide it whenever it's selected or unselected (like this answer).

Is there a way to bind the Div's display attribute to the radio-button's :checked attribute, something like $("#myDiv").visibility($("#myRadio").is('checked')); ?

In other words - can I data-bind the display/visibility to the radio button's state?

Maybe this can be done easily in css?

I'd like to hide/show a DIV based on the state of a radio button.

I know I can add a listener to the radio button and show/hide it whenever it's selected or unselected (like this answer).

Is there a way to bind the Div's display attribute to the radio-button's :checked attribute, something like $("#myDiv").visibility($("#myRadio").is('checked')); ?

In other words - can I data-bind the display/visibility to the radio button's state?

Maybe this can be done easily in css?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:07 CommunityBot 111 silver badge asked Apr 14, 2016 at 13:09 summerbulbsummerbulb 5,89988 gold badges4040 silver badges8585 bronze badges 4

• 1 $("#myDiv").toggle($("#myRadio").prop('checked')); – Rayon Commented Apr 14, 2016 at 13:10
• Will that change the visibility of myDiv every time the button state changes? – summerbulb Commented Apr 14, 2016 at 13:14
• 1 You must wrap this in radio button change event! – Rayon Commented Apr 14, 2016 at 13:15
• if you put in in a listener function, you can use on('change') – Velimir Tchatchevsky Commented Apr 14, 2016 at 13:15

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Well, it depends that what exactly you wants to do with your Div HTML Element:

Following example is to change Div's Visibility:

$( document ).ready(function() {

    $( "#myRadio" ).click(function() {
        if( $(this).is(':checked') ){

            // if you want to change your Div's css property 
            $("#myDiv").css("visibility","hidden");

        }else{

            // Reverting back visibility to visible
            $("#myDiv").css("visibility", "visible");

        }
    });

});

Following example is to change Div's Display:

$( document ).ready(function() {

    $( "#myRadio" ).click(function() {
        if( $(this).is(':checked') ){

            // if you want to change your Div's Display None
            $("#myDiv").hide();

        }else{

            // if you want to change your Div's Display BLOCK
            $("#myDiv").show();

        }
    });

});

$('#myRadio').on('click', function(){
    if($(this).prop('checked')){ 
        $('#myDiv').show();
    } else {
        $('#myDiv').hide();
    }
});

Above script will check weather radio button is clicked or not on every click

$( document ).ready(function() {
    $( "#myRadio" ).on("change", function() {
        $("#myDiv").css("visibility" ? $(this).is(":checked") ? "visible" : "hidden");
    });

});

OR

$('#myRadio').on('change', function(){
    if($(this).is(':checked'))
        $('#myDiv').show();
     else 
        $('#myDiv').hide();
});

On change is technically better than on click, so you aren't running this code when a radio button that is already selected it clicked. Practically, it's the same thing.

If you are searching for a plain CSS solution, you should check out this Question/Answer

Your radio-input needs to be at the same level as the div you want to hide.

HTML:

<input type="radio" name="d" id="reveal"><label>reveal it</label>
<input type="radio" name="d" id="hideBack"><label>hide it</label>
<div id="email">
   <form id="email-form" class="nice" action="" method="post">
       <input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
       <input type="hidden" name="name" id="id_name_email">
       <a class="btn" >Apply</a>
   </form>
</div>

CSS:

#reveal:not(:checked) ~ #email{
  display: none;
}
#reveal:checked ~ #email{
  display: block;
}
#email{
  display: none;
}

Fiddle

Use can use the jquery onchange event with following css

$(function() {
	$('input[type=radio]').on('change', function() {
  	$('#mydiv').toggle();
  })
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "mydiv"class = "show-hide"> Hello </div>
<div>
<label>show-hide</label>
<input type="radio" name="show">
</div>