javascript - 使用 jquery 清除单选按钮列表选择

Question

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

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>

Answer 1

代替：

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

尝试：

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

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

$('.checkboxlistid9')

我没有看到checkboxlistid9你的课程asp:RadioButtonList

将查询选择器更改为：

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

或者

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

Answer 2

The radio buttons will be descendants of the element that represents the RadioButtonList, you can select them with #<%= rblLst.ClientID %> input[type=radio] and use .prop() to remove the checked property.

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

Answer 3

你应该使用prop(). 另外，each()要迭代：

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

Answer 4

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

Answer 5

如果是基于 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>