使用 jquery 清除单选按钮列表选择答案

【问题标题】：clear radiobutton list selection using jquery使用 jquery 清除单选按钮列表选择
【发布时间】：2012-09-11 01:02:01
【问题描述】：

我想在用户在文本框中输入文本后清除单选按钮列表选择。我尝试了以下代码，但它似乎没有工作，也没有显示任何错误。如果有任何建议，请告诉我。

function ClearRadioButtonList() {
    var checkboxlistid9 = "#<%= rblLst.ClientID %>";
    $('.checkboxlistid9').attr('checked',false);     
}

<telerik:RadMaskedTextBox ID="txtCode" runat="server" Mask="###-##-####" SelectionOnFocus="CaretToBeginning">
    <ClientEvents  OnBlur="ClearRadioButtonList" />
</telerik:RadMaskedTextBox>

<asp:RadioButtonList ID="rblLst" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="1">Unknown</asp:ListItem>
    <asp:ListItem Value="2">Not Applicable</asp:ListItem>
</asp:RadioButtonList>

【问题讨论】：

标签： javascript jquery asp.net

【解决方案1】：

如果是基于 i-checks 的动态单选按钮列表

<table id="Body_TTBody_rblAttendanceStatus" class="i-checks rblStatus">
<tbody>
<tr>
<td>
    <div class="iradio_flat-red" style="position: relative;">
        <input id="Body_TTBody_rblAttendanceStatus_0" type="radio">
    </div>
    <label for="Body_TTBody_rblAttendanceStatus_0" class="">Absent</label></td>
</tr>
<tr>
<td>
    <div class="iradio_flat-red" style="position: relative;">
        <input id="Body_TTBody_rblAttendanceStatus_1" type="radio">
    </div>
    <label for="Body_TTBody_rblAttendanceStatus_1" class="">Planned Leave</label> 
</td>
</tr>
<tr>
 <td>
    <div class="iradio_flat-red" style="position: relative;">
        <input id="Body_TTBody_rblAttendanceStatus_2" type="radio">
    </div>
    <label for="Body_TTBody_rblAttendanceStatus_2" class="">Present</label></td>
</tr>
<tr>
<td>
    <div class="iradio_flat-red" style="position: relative;">
        <input id="Body_TTBody_rblAttendanceStatus_3" type="radio">
    </div>
    <label for="Body_TTBody_rblAttendanceStatus_3" class="">Unplanned Leave</label> 
 </td>
 </tr>
</tbody>
</table>

 <script type="text/javascript">
 jQuery('#Body_TTBody_rblAttendanceStatus > tbody > tr> td').each(function (index, value) {
  if ($(value).find('input[type="radio"]').prop('checked')) {
     $(value).find('input[type="radio"]').prop('checked', false);
     $(value).find('input[type="radio"]').closest("div").removeClass("checked");
    }
});
</script>

【讨论】：

【解决方案2】：

单选按钮将是代表RadioButtonList 的元素的后代，您可以使用#<%= rblLst.ClientID %> input[type=radio] 选择它们并使用.prop() 删除选中的属性。

function ClearRadioButtonList() {
    $("#<%= rblLst.ClientID %> input[type=radio]").prop('checked',false);     
}

【讨论】：

【解决方案3】：

代替：

$('.checkboxlistid9').attr('checked',false);

试试：

$('.checkboxlistid9').removeAttr('checked');

另外我认为你的 jQuery 选择器是错误的

$('.checkboxlistid9')

我在您的 asp:RadioButtonList 上没有看到课程 checkboxlistid9

将查询选择器更改为：

$("table[id$=rblLst] input:radio:checked").removeAttr("checked");

或者

$("table[id$=rblLst] input:radio").each(function (i, x){
    if($(x).is(":checked")){
        $(x).removeAttr("checked");
    }
});

【讨论】：

谢谢。它现在正在工作。我将代码更改为 $("table[id$=rblLst] input:radio:checked").removeAttr("checked");

【解决方案4】：

您应该使用prop()。另外，each() 进行迭代：

$('.checkboxlistid9').each(function (index, elem){
    $(elem).prop('checked',false);
})

【讨论】：

【解决方案5】：

$('.checkboxlistid9').removeAttr('checked');

【讨论】：