与复选框不同，一旦单击，用户就不可能取消选择单选按钮。有什么方法可以使用Javascript对其进行编程切换吗？最好不使用jQuery。
Answers:
您可以将HTML对象的属性checked设置false如下：
document.getElementById('desiredInput').checked = false;
PS：按住此Ctrl键可以取消选中。
if(e.ctrlKey) {...
if ctrlKey，然后...好吧，您可以取消选中它...但是您永远不能检查单选，因为[click]事件目标的checked属性始终显示为checked。
单选按钮按组使用，这是由它们共享相同name属性定义的。然后单击其中之一取消选择当前选择的一个。为了允许用户取消他所做的“真实”选择，您可以包括一个与空选择相对应的单选按钮，例如“不知道”或“不回答”。
如果希望单个按钮可以选中或取消选中，请使用复选框。
可以（但通常不相关）取消选中JavaScript中的单选按钮，只需将其checked属性设置为false，例如
<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">
这是我的答案（尽管我是用jQuery制作的，但仅用于选择器并添加和删除类，因此您可以轻松地将其替换为纯JS选择器和纯JS add属性）
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
$(document).on("click", "input[name='radioBtn']", function(){
thisRadio = $(this);
if (thisRadio.hasClass("imChecked")) {
thisRadio.removeClass("imChecked");
thisRadio.prop('checked', false);
} else {
thisRadio.prop('checked', true);
thisRadio.addClass("imChecked");
};
})
clicks根本不起作用，因为.checked它总是正确的。mousedown不起作用是因为mouseup破坏了-即使是e.preventDefault();e.stop[Immediate]Propagation();; 第二个最佳技术是上述e.ctrlKey方法-但这需要用户一些特殊知识。唯一的方法是[可能]使用某种 哨兵，例如aclass或data-checked。请证明我错了！
包装在插件中
局限性：
(function($) {
$.fn.uncheckableRadio = function() {
var $root = this;
$root.each(function() {
var $radio = $(this);
if ($radio.prop('checked')) {
$radio.data('checked', true);
} else {
$radio.data('checked', false);
}
$radio.click(function() {
var $this = $(this);
if ($this.data('checked')) {
$this.prop('checked', false);
$this.data('checked', false);
$this.trigger('change');
} else {
$this.data('checked', true);
$this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
}
});
});
return $root;
};
}(jQuery));
$('[type=radio]').uncheckableRadio();
$('button').click(function() {
$('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label><input name="myRadio" type="radio" value="V1" /> R1</label>
<label><input name="myRadio" type="radio" value="V2" /> R2</label>
<label><input name="myRadio" type="radio" value="V3" /> R3</label>
<button type="button">Change R2</button>
</form>由于单选按钮主要用于组中，因此getElementsByName( ' ' );在脚本标签中更容易抓住它们。这将返回一个数组，在每个数组子级上放置一个事件侦听器，并设置检查状态。看这个样本。
var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){
myRadios[x].onclick = function(){
if(setCheck != this){
setCheck = this;
}else{
this.checked = false;
setCheck = null;
}
};
}
setCheck变量在这里没有任何意义。
虽然它是用javascript询问的，但从jquery进行的适应是微不足道的...使用此方法，您可以检查“ null”值并将其传递...
var checked_val = "null";
$(".no_option").on("click", function(){
if($(this).val() == checked_val){
$('input[name=group][value=null]').prop("checked",true);
checked_val = "null";
}else{
checked_val = $(this).val();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">这是个老问题，但人们一直来自Google，OP最好不带jQuery，所以这是我的看法。
甚至可以在IE 9上使用
// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
radio.addEventListener('click', function(){
var self = this;
// get all elements with same name but itself and mark them unchecked
Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
return self !== filterEl;
}).forEach(function(otherEl) {
delete otherEl.dataset.check
})
// set state based on previous one
if (this.dataset.hasOwnProperty('check')) {
this.checked = false
delete this.dataset.check
} else {
this.dataset.check = ''
}
}, false)
})<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>您无法通过轻松实现琐碎的取消检查if(this.checked) this.checked = false（如果您确实要这样做，请参阅最后的黑客方法），因为事件按以下顺序触发：
mousedown 要么 keydownmouseup 要么 keyupclickinput （仅当状态更改时）change （仅当状态更改时）现在在哪种情况下执行上述取消检查？
mouseup或mousedown：然后将第3步的值重新设置为true，并且更改和输入事件甚至不会触发，因为按顺序调用它们时状态没有更改-因此您不能在此处取消选中它click：状态永远为假，输入和更改也不会触发-因此您无法检查它input或change：当状态未更改且单击所选元素不会更改状态时，它不会触发-因此您在这里无法做任何有用的事情从上面的序列中可以学到，方法是：
mouseupclick为否定先前状态如果要将以前的状态存储在data属性中，请记住将其另存为string，而选中的属性为boolean。因此，您可以像这样实现它：
radio.onmouseup = function() { this.dataset.checked = this.checked? 1 : ""; }
radio.onclick = function() { this.checked = !this.dataset.checked; }
它似乎有效，但是由于以下原因，您不应该这样做：
mousedown其他地方，然后将鼠标悬停在单选按钮上方，然后mouseup：在这种情况下，mouseup触发并且单击不还有另一个问题：动态添加的单选按钮。有两种方法：
element.appendChild(radio)-如果您在所有无线电中启用取消选择功能DOMContentLoaded，则此动态添加的无线电不受影响element.innerHTML+= '<input type="radio">' -有效替换元素的HTML内容并在其中重新创建DOM-因此所有事件监听器都将被丢弃要解决（2），建议使用onclick content属性。请注意，element.onclick = fn和element.setAttribute("onclick", "fn()")是两件事。还要注意onclick，无论用户使用什么界面，每次用户激活无线电时都会触发。
另一个问题：如果启用取消选择功能，则还应该启用“Space模仿”复选框行为。以下代码解决了所有提到的问题：
function deselectableRadios(rootElement) {
if(!rootElement) rootElement = document;
if(!window.radioChecked) window.radioChecked = null;
window.radioClick = function(e) {
const obj = e.target;
if(e.keyCode) return obj.checked = e.keyCode!=32;
obj.checked = window.radioChecked != obj;
window.radioChecked = obj.checked ? obj : null;
}
rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
radio.setAttribute("onclick", "radioClick(event)");
radio.setAttribute("onkeyup", "radioClick(event)");
});
}
deselectableRadios();<label><input type="radio" name="tag1">one</label>
<label><input type="radio" name="tag1">two</label>
<label><input type="radio" name="tag1">three</label>
<label><input type="radio" name="tag1">four</label>现在，您可以deselectableRadios()在动态添加内容的任何时间进行调用，并且在无线电上多次调用不会破坏它。您还可以指定，rootElement仅更新HTML DOM的子树，并使您的网站更快。如果您不喜欢全局状态，则可以使用黑客方式：
问题的关键是滥用setTimeout上mouseup设置了checked属性后来调用它：
function deselectable() {
setTimeout(checked => this.checked = !checked, 0, this.checked);
}
现在，您可以取消选择任何单选按钮：
radio.onmouseup = deselectable;
但是，这种简单的单线仅适用于单击，不能解决上述问题。
取消选择单选基本上是复选框，在该复选框中只能选中该组中的一个。如果您的浏览器支持外观CSS4功能，则只需
<input type="checkbox" name="foo" style="appearance: radio">
然后在onclick事件中getElementsByName("foo")取消选中名称的所有其余复选框（如果未选中复选框，则不会发送值）。
我来这里是因为我有同样的问题。我想向用户展示这些选项，同时保留为空的选项。尽管可以使用复选框来显式地进行编码，但这会使后端复杂化。
让用户按下Control + click几乎和让他们通过控制台取消选中一样好。捕获鼠标的时间太早了，onclick太晚了。
好吧，最后是一个解决方案！只需将这几行放在页面上一次，即可完成页面上所有单选按钮的制作。您甚至可以摆弄选择器以对其进行自定义。
window.onload = function() {
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd) {
rd.addEventListener("mousedown", function() {
if(this.checked) {
this.onclick=function() {
this.checked=false
}
} else {
this.onclick=null
}
})
})
}<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>那就是我来到的：
function uncheck_radio_before_click(radio) {
if(radio.prop('checked'))
radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
var radio=$(this);
uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
var label=$(this);
var radio;
if(label.attr('for'))
radio=$('#'+label.attr('for')).filter('input[type="radio"]');
else
radio=label.children('input[type="radio"]');
if(radio.length)
uncheck_radio_before_click(radio);
})
扩展user3716078的答案，以允许多个独立的单选按钮组以及一种将事件侦听器分配给多个元素的更巧妙的方式...
window.onload = function() {
var acc_checked=[];
[].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
/**
* i represents the integer value of where we are in the loop
* el represents the element in question in the current loop
*/
el.addEventListener('click', function(e){
if(acc_checked[this.name] != this) {
acc_checked[this.name] = this;
} else {
this.checked = false;
acc_checked[this.name] = null;
}
}, false);
});
}
我将尝试通过3个单选按钮做出一个小小的答案，稍后您可以添加内容。
const radios = Array.from(document.getElementsByClassName('radio'))
for(let i of radios) {
i.state = false
i.onclick = () => {
i.checked = i.state = !i.state
for(let j of radios)
if(j !== i) j.checked = j.state = false
}
}<input class="radio" type="radio">X
<input class="radio" type="radio">Y
<input class="radio" type="radio">Z现在，我想在我的rails项目中实现它，它有多种形式（依赖关系，是从数据库中获取的），每种形式都有2个可见的单选按钮+ 1个隐藏的单选按钮。
我希望用户选择/取消选择每个表单的单选按钮。并且，在表单上选择一个按钮不应取消选择在另一表单上的另一个按钮。所以我宁愿这样做：
var radios = Array.from(document.getElementsByClassName('radio'))
for (let i of radios) {
i.state = false
i.onclick = () => {
i.checked = i.state = !i.state
for (let j of radios)
if (j !== i) j.state = false
}
}<form>
<input class="radio" name="A" type="radio">A
<input class="radio" name="A" type="radio">B
<input class="radio" name="A" type="radio">C
</form>
<form>
<input class="radio" name="A" type="radio">D
<input class="radio" name="A" type="radio">E
<input class="radio" name="A" type="radio">F
</form>
<form>
<input class="radio" name="SOMETHING" type="radio">G
<input class="radio" name="SOMETHING" type="radio">H
<input class="radio" name="SOMETHING" type="radio">I
</form>您会看到所有名称都相同，但是它们的格式不同，由3分组，因此适用于多种格式。
大多数现代浏览器都将其checked="anything"视为checked="true"。
如果您认为合适，则可能必须删除选中的属性，其中之一可能与加载页面有关。
$(this).removeAttr('checked')
如果您希望检查单选按钮是否符合某种条件，这可能会对您有所帮助。您可以简单地删除属性来实现。
PS：在所有情况下都无济于事。
您可以使用 checked单选按钮属性取消选中它。
像这样：
<script>
function uncheck()
{
document.getElementById('myRadio').checked = false;
}
function check()
{
document.getElementById('myRadio').checked = true;
}
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>
可在此处查看实际操作：http : //jsfiddle.net/wgYNa/
完整的代码看起来像这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked" onclick="setRadio(this)" />
<label for="myRadio"></label>
<script language="javascript">
function setRadio(obj)
{
obj.checked = false;
}
</script>
</body>
</html>
这是一个可以取消选中单选按钮（而不是进行新选择）的示例。我有一本字典，可以使用各种索引来选择其条目。通过一组单选按钮选择要使用的索引。但是，如果用户只想浏览，也可以使用“随机输入”按钮。使用随机输入按钮选择条目后将索引留在原处会产生误导，因此当按下此按钮时，我取消选中所有索引选择单选按钮，并将索引框架的内容替换为空白页。
required="required"。否则，您要么必须向服务器发送一个值，然后假设每个用户都在考虑与该单选组互动以及对服务器可能产生的潜在影响的思考与努力，或者为我选择的单选按钮一个选项，然后意识到我不在乎，但是由于无法取消选中广播，所以这是我唯一的选择。或Web 1.0重置。
如果您使用Iclick插入，则如下所示。
$('#radio1').iCheck('uncheck');
不幸的是，它不能在Chrome或Edge中运行，但可以在FireFox中运行：
$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });
一个有效的Bug更新到Shmili Breuer的答案。
(function() {
$( "input[type='radio'].revertible" ).click(function() {
var $this = $( this );
// update and remove the previous checked class
var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
$prevChecked.removeClass('checked');
if( $this.hasClass("checked") ) {
$this.removeClass("checked");
$this.prop("checked", false);
}
else {
$this.addClass("checked");
}
});
})();
这几乎对我有用。
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
$(document).on("click", "input[name='radioBtn']", function(){
thisRadio = $(this);
if (thisRadio.hasClass("imChecked")) {
thisRadio.removeClass("imChecked");
thisRadio.prop('checked', false);
} else {
thisRadio.prop('checked', true);
thisRadio.addClass("imChecked");
};
})
但是，如果我选中一个单选按钮，则选中另一个，然后再次尝试检查第一个，我必须单击两次。这是因为它具有类imChecked。我只需要在验证之前取消选中其他单选按钮即可。
添加此行使其起作用：
$（“ input [name ='radioBtn']”）。not（thisRadio）.removeClass（“ imChecked”）;
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
$(document).on("click", "input[name='radioBtn']", function(){
thisRadio = $(this);
$("input[name='radioBtn']").not(thisRadio).removeClass("imChecked");
if (thisRadio.hasClass("imChecked")) {
thisRadio.removeClass("imChecked");
thisRadio.prop('checked', false);
} else {
thisRadio.prop('checked', true);
thisRadio.addClass("imChecked");
};
})
下面的代码可以解决问题。
$('input[type=radio]').click(function() {
if($(this).hasClass("checked")){
this.checked = false;
$(this).removeClass("checked")
}else{
$(this).addClass("checked")
}
});假设您有一个按钮，单击它可以将所有单选按钮选择都设为false。您可以在onclick处理程序中编写以下代码。
下面的代码根据类名称使用单选按钮，对于每个元素，它将标记为false。
var elements=document.getElementsByClassName('Button');
Array.prototype.forEach.call(elements, function(element) {
element.checked = false;
});
$0.checked=false