jQuery 如何取消选中选中的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17120576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to uncheck checked radio button
提问by ccd580ac6753941c6f84fe2e19f229
The thing is this solution work only in firefox
问题是这个解决方案只适用于 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/
在 chrome 中，它不允许您选择任何内容 http://jsfiddle.net/wuAWn/
Ofc, i could use variable and write something like
Ofc，我可以使用变量并写一些类似的东西
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.
但是我的页面上将有几个单选按钮组，并且 html 内容是通过 ajax 加载的，所以我想为所有这些按钮编写 1 个函数，而不是为每个单选按钮组定义变量并为每个单选按钮编写相同的函数团体。
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/
编辑：感谢您对复选框的帮助，但要使复选框充当单选按钮组，您需要编写额外的 javascrip 来取消选中所有其他同名的复选框 onclick，我已经有了单选按钮 css，对我来说更容易添加类似外观复选框的类并使其看起来像复选框，我使用统一库进行自定义外观，无论如何这是我奇怪的解决方案http://jsfiddle.net/wuAWn/9/
回答by Kzest
This simple script allows you to uncheck an already checked radio button. Works on all javascript enabled browsers.
这个简单的脚本允许您取消选中已选中的单选按钮。适用于所有启用 javascript 的浏览器。
var allRadios = document.getElementsByName('re');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
allRadios[x].onclick = function() {
if(booRadio == this){
this.checked = false;
booRadio = null;
} else {
booRadio = this;
}
};
}<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>回答by Brad
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
单选按钮是必需的选项...如果您希望取消选中它们，请使用复选框，无需使事情复杂化并允许用户取消选中单选按钮；删除 JQuery 允许您从其中之一中进行选择
回答by olleicua
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.
您可能会考虑向每个标有“无”或类似标签的组添加一个额外的单选按钮。这可以创建一致的用户体验，而不会使开发过程复杂化。
回答by sangram parmar
try this
尝试这个
single function for all radio have class "radio-button"
所有收音机的单一功能都有类“单选按钮”
work in chrome and FF
在 chrome 和 FF 中工作
$('.radio-button').on("click", function(event){
$('.radio-button').prop('checked', false);
$(this).prop('checked', true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>回答by sangram parmar
try this
尝试这个
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')
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>