Uncheck a checked radio on click

Question

I want to create a radio button that can have an unchecked value. So I created the code:

$('form').on('click', 'input[type="radio"]:checked', function (event) {
    $(this).prop("checked", false);
});

Well, this is pretty straightforward: click on a checked radio, uncheck it.

But, what happens is that it never checks the radio in the first place. When I click an unchecked radio it checks before detecting if is checked, then considers it checked and unchecks it.

Well, this is not a duplicate as it asks a different question. It's not about how to uncheck, but how to automatically uncheck upon clicking.

How can I go around this problem?

Here's a fiddle. Can't answer since it's maked as duplicate... https://jsfiddle.net/1ykm4n18/1/ — Starfish, May 26 '16 at 17:56
@Cory This is not the same question as the proposed duplicate. OP desires a way of unchecking a radio button ***only under a specific condition,*** which is not dealt with in the linked answer. — cssyphus, May 26 '16 at 18:16
_I want to create a radio button that can have an unchecked value._ Use a checkbox instead — j08691, May 26 '16 at 20:05

score 0 · Answer 1 · answered May 27 '16 at 10:45

You can solve your issue like following.

$('form :radio').attr('data-ischecked', function() {
    return this.checked;
}); //set initial status in data-ischecked attribute 

$('form').on('click', ':radio', function () {
    var status = $(this).data('ischecked'); //get status
    status && $(this).prop("checked", false); //uncheck if checked
    $(this).data('ischecked', !status); //toggle status
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="radio"/>
    <input type="radio"/>
</form>

score -1 · Answer 2 · answered May 26 '16 at 17:43

-1

Your example only executes when the button is clicked. To have the radio button be checked when the page loads, I would put a $(document).onload() event that sets the button's value to checked.

answered May 26 '16 at 17:43

scott

101
3

Uncheck a checked radio on click

2 Answers2