Bootstrap 使用jquery在单击时取消选中单选按钮

1yjd4xko  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(7)|浏览(149)

只有在页面刷新时才取消选中单选按钮

<input type="radio" name="test">
    1<input type="radio" name="test">2
   <input type="button" id="btn" />

$("#btn").click(function(){

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

});

字符串
我创建了一个fiddlehttp://jsfiddle.net/8jKJc/220/

但它不与Bootstrap工作

v440hwme

v440hwme1#

使用.prop代替.attr

$('input[type="radio"]').prop('checked', false);

字符串
[ Demo ]

rdlzhqv9

rdlzhqv92#

使用这个:

$(this).prop('checked', false);
 //$('input[type="radio"]').attr('checked', false);

字符串
您可以看到**link用于区分.prop().attr().attr()适合访问HTML元素属性,如(name, id, class,etc..).prop(),用于大多数情况下返回布尔值的DOM元素属性。
来自
jQuery**官网:
例如,selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected应该使用.prop()方法检索和设置。在jQuery 1.6之前,这些属性可以通过.attr()方法检索,但这不在attr的范围内。它们没有相应的属性,只是属性。

cygmwpex

cygmwpex3#

使用.prop()内置函数。

$('input[type="radio"]').prop('checked', false);

字符串

r9f1avp5

r9f1avp54#

它很容易使用以下将帮助您:

$("input:checked").removeAttr("checked");

字符串
检查更新的Fiddle Here

tct7dpnv

tct7dpnv5#

如果你使用jQuery > 1.5,你应该使用prop而不是attr

$('input[type="radio"]').prop('checked', false);

字符串
演示here
详情请参见here

4ngedf3f

4ngedf3f6#

.prop只设置属性,不设置属性。
jQuery API
也可以使用is来实现

$("#btn").click(function(){
$("input[type='radio']").each(function() {
if($(this).is(':checked')){
  $(this).prop('checked',false);
   }
});
});

字符串

dly7yett

dly7yett7#

如果你想在一个单选按钮未被选中时选中它,而在它被选中时取消选中它,这是有问题的。只要您单击输入,该值就会被设置为true,因此无法实现预期的行为。所以首先你必须阻止点击的动作,然后使用“mousedown”和“mouseup”事件来悄悄地检测输入的状态。标签同上
https://jsfiddle.net/greatalf/k7cwfemp/4/

<!DOCTYPE html>
<html>
<head>
    <title>Uncheck radio button</title>
</head>
<body>

    <input type="radio" name="options" value="option1" id="option1">
    <label for="option1">Option 1</label><br>

    <input type="radio" name="options" value="option2" id="option2">
    <label for="option2">Option 2</label><br>

    <input type="radio" name="options" value="option3" id="option3">
    <label for="option3">Option 3</label><br>
    
</body>
</html>

个字符

相关问题