Question

I have this code:

<div style="padding-bottom:11px;">

<input class="radio" type="radio" value=" join our table" name="Choose:">
<label class="optionLabel"> join our table</label>

</div>

What I want to do is when a radio button is checked to show a div, something similar with a tooltip.

The problem is that I don’t know how to detect when a radio button is checked.

Any suggestions are welcome.
Thanks!

Answer 1

To detect the click, or change, event on a radio input element and show a div in response:

$('input:radio').click(
    function(e){
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

Or:

$('input:radio').change(
    function(e){
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

You could also use the on() method, and bind to an ancestor element of the radio inputs (this is used to assign event-handling to elements created dynamically):

$('form').on('change click', 'input:radio', function(e){
        console.log(e.type); // shows the event, whether 'click' or 'change'
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

References:

• change().
• click().
• on().
• show().