Set HTML element visibility by radio button state

Question

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?

Will that change the visibility of `myDiv` every time the button state changes? — summerbulb, Apr 14 '16 at 13:14
if you put in in a listener function, you can use `on('change')` — Velimir Tchatchevsky, Apr 14 '16 at 13:15

score 1 · Answer 1 · answered Apr 14 '16 at 13:18

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();

        }
    });

});

score 1 · Answer 2 · answered Apr 14 '16 at 13:25

1

$('#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

answered Apr 14 '16 at 13:25

Gaurav Aggarwal

9,809
6
36
74

score 1 · Answer 3 · answered Apr 14 '16 at 13:30

$( 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.

score 1 · Answer 4 · edited May 23 '17 at 12:31

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

Shubham Khatri · Answer 5 · 2016-04-14T17:10:04.403

0

Use can use the jquery onchange event with following css

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

<script src="https://ajax.googleapis.com/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>

edited Apr 14 '16 at 17:10

answered Apr 14 '16 at 13:20

Shubham Khatri

270,417
55
406
400

Adding mutually exclusive CSS styles to the same element can unnecessarily complicate your solution and make troubleshooting more difficult. Granted, it works, but if applied to more complex code, this approach could get hairy very quickly. – Stan Shaw Apr 14 '16 at 13:25
1

no need for css classes you can just use `toggle` instead of `toggleClass` – Velimir Tchatchevsky Apr 14 '16 at 13:31

Set HTML element visibility by radio button state

5 Answers5