uncheck radio button by clicking on same

Question

<table class="table">
    <tr>
        <td>
            <input type="radio" id="radio1" name="1" checked="checked" class="radio"/>
        </td>        
        <td>        
          <input type="radio" id="radio2" name="1" checked="checked" class="radio"/>
        </td>
    </tr>
</table>

I want to follow default behavior of radio group, but with one more functionality, Suppose any of radio is selected, now if same radio is selected/clicked then it will unchecked itself. I have tried using 'mouseup' event but its not working

function radioSearchFn(obj)
{
    if(obj.checked == true)
    {
        obj.checked = false;
        obj.removeAttribute("checked");

    }
}

DEMO

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Answer to your question here.

Radio buttons are meant to be required, therefore one of them must always be checked. If you want this attribute gone, you need to use checkboxes, which are meant to serve what you need.

More about checkboxes

If you still insist on using radio buttons, try this JQuery code, written in another answer in the post I referred to.

var radio_button=false;
$('.radio-button').on("click", function(event){
    var this_input=$(this);
        if(this_input.attr('checked1')=='11')
    {

        this_input.attr('checked1','11')



    }
    else
    {
        this_input.attr('checked1','22')

    }
    $('.radio-button').prop('checked', false);
    if(this_input.attr('checked1')=='11')
    {
        this_input.prop('checked', false);
        this_input.attr('checked1','22')
    }
    else{
        this_input.prop('checked', true);
        this_input.attr('checked1','11')
    }

});

Thanks for help. I have done with Prototype and its working : http://jsfiddle.net/VBM2Y/5/ — CPP, Sep 29 '13 at 09:34

score 0 · Answer 2 · answered Aug 16 '18 at 15:03

It's easy, you could add an attribute instead radio button is checked first time. Later you check this new attribute for next change. Example:

$("input[type='radio']").change(function () {
         $(this).attr('checked_status', true);
});

$("input[type='radio']").click(function () {
    if ($(this).attr('checked_status')) {
        $(this).prop('checked', false);
        $(this).attr('checked_status', false);
    }
});

uncheck radio button by clicking on same

2 Answers2