22

使用 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>

有没有办法一次取消选中按钮集的所有单选按钮？

4

7 回答 7

33

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

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

工作JSFiddle。

于 2012-07-25T09:46:07.580 回答
15

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

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

$("#radio").find("input:radio").prop("checked", false).end()
           .buttonset("refresh");
于 2012-07-25T09:48:59.183 回答
14

jQuery 1.6 之前的版本

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

或者

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

jQuery 1.6+ 之后

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

或者

$(':radio').removeProp('checked');
于 2012-07-25T12:04:01.540 回答
1

偶然发现了这一点......使用 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>
于 2013-11-02T13:53:08.130 回答
1

这对我行得通

$('input:radio[name="RadioName"]').each(function () { $(this).attr('checked', false); });
于 2018-03-29T08:08:07.410 回答
0

对于 jQuery 1.12+

将单选按钮包裹在 a 中<div>并给它一个 id（例如“radio”）

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

于 2019-12-09T10:22:28.803 回答
0

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>

于 2019-12-09T12:58:47.030 回答