一次取消选中所有 JQuery 单选按钮集答案

【问题标题】：Uncheck all JQuery radio buttonset at once一次取消选中所有 JQuery 单选按钮集
【发布时间】：2012-07-25 09:42:26
【问题描述】：

使用 jQ-ui 的按钮设置功能

<script>
    $(function() {
        $( "#radio" ).buttonset();
    });
    </script>


    <div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
    </div>

有没有办法一次性取消所有buttonset的单选按钮？

【问题讨论】：

应该将$( "#radio" ) 改为$( "radio" )？

标签： javascript jquery jquery-ui

【解决方案1】：

您可以使用以下命令取消选中它们（针对 jQuery UI 1.9 更新：

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

工作JSFiddle。

【讨论】：

不错。答案越来越短。 :)
那个小提琴似乎没有成功地将单选按钮变成 jQuery UI 按钮集，这就是它似乎工作的原因。 Frédéric 不正确，您必须进行刷新。
这在 jQuery 1.9 中不起作用并且不影响 jQuery UI 按钮集。下面的答案是更好的答案。
@CoryDorning 我已经更新了答案和小提琴，感谢您的提醒
这个答案是错误的 .removeAttr('checked');不会取消选中收音机。请参阅 jQuery API。

【解决方案2】：

您可以匹配所有单选按钮并使用prop() 取消选中它们。

但是，您还必须在这样做之后刷新按钮集小部件：

$("#radio").find("input:radio").prop("checked", false).end()
           .buttonset("refresh");

【讨论】：

【解决方案3】：

jQuery 1.6 之前的版本

$(':radio').attr('checked', false);

或

$(':radio').removeAttr('checked');

jQuery 1.6+之后

$(':radio').prop('checked', false);

或

$(':radio').removeProp('checked');

【讨论】：

【解决方案4】：

偶然发现了这一点……在 jQuery 1.9.1 中，按钮集使用了类名，所有按钮最初都没有设置。尚不确定这是否有影响，但很容易知道。

$( "div.myclass" ).buttonset();

<div id="myDiv" class="myclass">
    <input type="radio" name="myname" id="id1" value="1"><label for="id1">Label1</label>
    <input type="radio" name="myname" id="id2" value="2"><label for="id2">Label2</label>
    <input type="radio" name="myname" id="id3" value="3"><label for="id3">Label2</label>
</div>

【讨论】：

【解决方案5】：

这对我有用

$('input:radio[name="RadioName"]').each(function () { $(this).attr('checked', false); });

【讨论】：

【解决方案6】：

对于 jQuery 1.12+

将单选按钮包装在 <div> 中并为其指定一个 ID（例如“radio”）

$("#radio").find("input:radio").prop("checked", false)

【讨论】：

【解决方案7】：

Javascirpt 原生方式来实现这一点

function reset(){
//var list = document.querySelectorAll('input[type=radio]');
var list =document.querySelectorAll('input[type="radio"]:checked')
debugger
list.forEach(element => { 
if(element.checked){element.checked=false}}
    
);
}

<div id="myDiv" class="myclass">
    <input type="radio" name="myname" id="id1"  value="1"><label for="id1">Label1</label>
    <input type="radio" name="myname" id="id2" value="2"><label for="id2">Label2</label>
    <input type="radio" name="myname" id="id3" checked value="3"><label for="id3">Label3</label>
</div>

<button onclick="reset()">reset me</button>

【讨论】：