How to toggle the check state of a radio input element on click?

Question

How to (un)check a radio input element on click of the element or its container?

I have tried the code below, but it does not uncheck the radio.

HTML:

<

Answer 1

use only html , same functionality

<label for="rdio"><input type="radio" name="rdio" id="rdio" class="il-radio"  /> Is </label>

Answer 2

You have to prevent the default behaviour. Currently, on click, the following happens:

1. click event fires for the container (div.is).
2. click event fires for the label.
3. Since your function toggles a state, and the event listener is called twice, the outcome is that nothing seems to happen.

Corrected code (http://jsfiddle.net/nHvsf/3/):

$(".is").click(function(event) {
    var radio_selector = 'input[type="radio"]',
        $radio;

    // Ignore the event when the radio input is clicked.
    if (!$(event.target).is(radio_selector)) {
        $radio = $(this).find(radio_selector);
        // Prevent the event to be triggered
        // on another element, for the same click
        event.stopImmediatePropagation();
        // We manually check the box, so prevent default
        event.preventDefault();
        $radio.prop('checked', !$radio.is(':checked'));
    }
});
$(".il-radio").on('change click', function(event) {
    // The change event only fires when the checkbox state changes
    // The click event always fires

    // When the radio is already checked, this event will fire only once,
    //   resulting in an unchecked checkbox.
    // When the radio is not checked already, this event fires twice
    //   so that the state does not change
    this.checked = !this.checked;
});

Answer 3

radio buttons don't uncheck, you need to use a checkbox (type = 'checkbox')