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:

<div class="is">
    <label><input type="radio" name="check" class="il-radio" /> Is </label>
    <img src="picture" />
</div>

jQuery:

$(".is label, .is ").click(function () {
    if (!$(this).find(".il-radio").attr("checked")) {
        $(this).find(".il-radio").attr("checked", "checked");
    } else if ($(this).find(".il-radio").attr("checked") == "checked") {
        $(this).find(".il-radio").removeAttr("checked");
    }
});

why dont you just use label in its original form? http://www.w3schools.com/tags/tag_label.asp — Oriesok Vlassky, Mar 16 '12 at 13:27
@OriesokVlassky: Because that would require every input control to have an ID, in order for the label to refer to it. `...` is valid HTML; it should work. — cHao, Mar 16 '12 at 13:31
Check http://stackoverflow.com/questions/2117538/jquery-how-to-uncheck-a-radio-button — Gert Grenander, Mar 16 '12 at 14:04

score 6 · Answer 1 · answered Mar 16 '12 at 13:27

6

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

answered Mar 16 '12 at 13:27

CKKiller

1,424
1
16
20

Can you give me the proper way to do so for a radio? – funerr Mar 16 '12 at 13:28
2

a radio button is normally only unchecked if another radio button is clicked with the same "name" attribute, it's basic HTML – CKKiller Mar 16 '12 at 13:30
Radio buttons work that way. You should use Checkbox if you want a "check-uncheck" behavior – MatuDuke Mar 16 '12 at 13:31
Why do you want to mangle a radio button to do something that a checkbox would do without any extra work? – JJJ Mar 16 '12 at 13:31
@Juhana, I have two of those is classes, i need only one of them to be selected. – funerr Mar 16 '12 at 14:02
Checkboxes aren't mutually exclusive by default. That's why someone would want to stick with radio buttons... – Damian Green Mar 06 '17 at 22:54

Rob W · Accepted Answer · 2015-09-25T08:48:56.370

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

click event fires for the container (div.is).
click event fires for the label.
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;
});

Can you make it so if I click on the radio it-self will check it also? — funerr, Mar 20 '12 at 16:21
@agam360 Previously, the `event.target` property was used as a reference. That was wrong, and it's fixed now. — Rob W, Mar 20 '12 at 17:34

score 0 · Answer 3 · answered Mar 16 '12 at 13:30

0

use only html , same functionality

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

answered Mar 16 '12 at 13:30

sandeep

2,244
1
23
38

1

The `for` attribute is not needed when the control is the only one within the label. – cHao Mar 16 '12 at 13:35

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

3 Answers3

Linked