用jQuery取消选中单选按钮有点儿

时间:2013-02-01 09:45:36

标签: jquery radio-button

我需要能够在一组3中取消选中已检查的单选按钮。它在大多数情况下都有效,但它有点小马车 - 当我想要检查其他按钮时有时取消选中,有时不检查当我取消选中另一个按钮时,第一次点击按钮,在点击不同的无线电几次后取消选中,等等。希望有人可以看一看,看看是什么导致了这个

CSS:

input[type="radio"] {   display: none;  }
input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../images/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}
input[type="radio"]:checked + label span {
    background:url(../images/check_radio_sheet.png) -57px top no-repeat;
}

HTML:

<form class="optionsfilter" action="#">
<ul style="list-style: none;">
<li>
<span style="color: #eee;">Smoking Inside?</span>
<div class="clear"></div>
<input type="radio" name="smokingoption" id="smoking" value="smoking"><label for="smoking" onclick=""><span></span>Yes</label>
<input type="radio" name="smokingoption" id="non-smoking" value="non-smoking"><label for="non-smoking" onclick=""><span></span>No</label>
<input type="radio" name="smokingoption" id="cigarsmoking" value="cigar"><label for="cigarsmoking" onclick=""><span></span>Cigars</label>
</li>
</ul>
</form>

这是脚本:

$('input[type="radio"]').click(function() {
    var checked = $(this).attr('checked');
    if(checked){
        $(this).attr('checked', false);
    } else{
        $(this).attr('checked', true);
    }
});

这是一个包含所有代码的jsFiddle: http://jsfiddle.net/RfDk6/

2 个答案:

答案 0 :(得分:2)

我不知道你想要实现什么,但是从jQuery 1.6开始修改表单元素的已检查属性,应该使用prop方法而不是attr,{{1} }是一个属性,通过checked设置false / true不会更改单选按钮的attr属性。

checked

答案 1 :(得分:0)

这适用于Chrome(我没有在别处测试过 - 抱歉)。

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

.prop函数只删除了一个无线电组的第一个实例,而removeattr则取消了该批次。