The thing is this solution work only in firefox
$(':radio').on("change", function(event) {
$(this).prop('checked', true);
});
$(':radio').on("click", function(event) {
$(this).prop('checked', false);
});
In chrome, it wont allow you to select anything http://jsfiddle.net/wuAWn/
Ofc, i could use variable and write something like
var val = -1;
$(':radio').on("click", function() {
if($(this).val() == val) {
$(this).prop('checked', false);
val = -1;
}
else val = $(this).val();
});
But i will have few radio button groups on my page and html content is loaded through ajax, so i would like to wrtite 1 function for all of them, instead of defining variables for every one radio button group and write same function for every radio button group.
Edit: thanks for your help with checkboxes, but for checkboxes to act as a radio button group, you need to write adittional javascrip that will uncheck all other checkboxes with same name onclick, i have already radio button css and its easier for me just to add class like look-like-checkbox and make it look like checkbox, i use uniform library for custom look, anyway here is my weird solution http://jsfiddle.net/wuAWn/9/
This question is related to
javascript
jquery
radio-button
You might consider adding an additional radio button to each group labeled 'none' or the like. This can create a consistent user experience without complicating the development process.
Radio buttons are meant to be required options... If you want them to be unchecked, use a checkbox, there is no need to complicate things and allow users to uncheck a radio button; removing the JQuery allows you to select from one of them
try this
single function for all radio have class "radio-button"
work in chrome and FF
$('.radio-button').on("click", function(event){_x000D_
$('.radio-button').prop('checked', false);_x000D_
$(this).prop('checked', true);_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>try this
var radio_button=false;_x000D_
$('.radio-button').on("click", function(event){_x000D_
var this_input=$(this);_x000D_
if(this_input.attr('checked1')=='11') {_x000D_
this_input.attr('checked1','11')_x000D_
} else {_x000D_
this_input.attr('checked1','22')_x000D_
}_x000D_
$('.radio-button').prop('checked', false);_x000D_
if(this_input.attr('checked1')=='11') {_x000D_
this_input.prop('checked', false);_x000D_
this_input.attr('checked1','22')_x000D_
} else {_x000D_
this_input.prop('checked', true);_x000D_
this_input.attr('checked1','11')_x000D_
}_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>This simple script allows you to uncheck an already checked radio button. Works on all javascript enabled browsers.
var allRadios = document.getElementsByName('re');_x000D_
var booRadio;_x000D_
var x = 0;_x000D_
for(x = 0; x < allRadios.length; x++){_x000D_
allRadios[x].onclick = function() {_x000D_
if(booRadio == this){_x000D_
this.checked = false;_x000D_
booRadio = null;_x000D_
} else {_x000D_
booRadio = this;_x000D_
}_x000D_
};_x000D_
}<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>Source: Stackoverflow.com