Susheel Singh
Susheel Singh

Reputation: 3854

check and uncheck radio buttons with different names

I am aware that if we have same names then radio buttons change alternatively. But i want it to be checked and unchecked on click without any relation with another radio.

js fiddle:

http://jsfiddle.net/Jk6Sk/1/

html

<input type="radio" name="test1" value="male" checked>Male<br>
<input type="radio" name="test2" value="female" checked>Female

js(I tried):

$("input[type=radio]").on("click",function(){
    if(!$(this).is(":checked")){
        $(this).prop("checked",true);
    }else{
        $(this).prop("checked",false);
    }
});

NOTE:

it should work like checkbox in short(Is it possible ??)

Upvotes: 2

Views: 2004

Answers (2)

Felix
Felix

Reputation: 38102

You can do like this:

jquery:

var radioStatus = false;
$.each($('input[type=radio]'),function(){
    this.radioStatus = $(this).prop("checked") || false;
    $(this).data("status",this.radioStatus);
    $(this).click(function(){
        this.radioStatus = !$(this).data("status")
        $(this).prop("checked",this.radioStatus);
        $(this).data("status",this.radioStatus);
    })
})

Fiddle Demo

Upvotes: 4

Adil
Adil

Reputation: 148110

You can uncheck all the check the current on radio button click event. I would use a class to group these kind of radio buttons to avoid un-wanted inclusion of radio buttons on the page and be specific.

Live Demo

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

Edit based on comments, You need to keep the state of radio button checked state to toggle.

Live Demo

$("input[type=radio]").data('checkedStatus', true);
$("input[type=radio]").on("click",function(){   
    if($(this).data('checkedStatus') == true)
    {
        this.checked = false;
        $(this).data('checkedStatus', false);
    }
    else
    {
         $(this).data('checkedStatus', true);
        this.checked = true;
    }
});

Upvotes: 8

Related Questions