Reputation: 3854
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:
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
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);
})
})
Upvotes: 4
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.
$("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.
$("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