如何使用 JQuery 取消选中 GridView 中的所有单选按钮？答案

【问题标题】：How to Uncheck All Radio Button inside GridView using JQuery?如何使用 JQuery 取消选中 GridView 中的所有单选按钮？
【发布时间】：2014-01-04 18:11:24
【问题描述】：

我在 GridView 中有一个单选按钮。我想取消选中除当前使用 JQuery 选择的所有 asp.net 单选按钮。我试过了，但没有结果..！

HTML 标记：

<ItemTemplate>
 <asp:RadioButton ID="rdbUser" runat="server" kID='<%# Eval("kID")%>' class="rdbUser" />
</ItemTemplate>

代码：

$(document).on("click", ".rdbUser", function() {
                var selectedRadio = $(this).attr('id');

                //var newrdo = $("input:radio.rdbUser:checked");
                //$(".rdbUser").prop('checked', false);
                //$('#' + selectedRadio).prop('checked', true);
                //$('input:radio[class=rdbUser]').prop('checked', false);
//                $('.rdbUser').removeAttr('checked');

                var kID = $(this).attr('kID');
                $("#ctl00_ContentPlaceHolder1_hdnKioskID").val(kID);

                alert("selected Radio : " + kID);
            });

关于 Chrome 中的 SeeingMarkup：

选中的 RadioButton：

<span class="rdbUser" kid="2"><input id="ctl00_ContentPlaceHolder1_GridView1_ctl03_rdbUser" type="radio" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$rdbUser" value="rdbUser"></span>

未选中的 RadioButton：

<span class="rdbUser" kid="21"><input id="ctl00_ContentPlaceHolder1_GridView1_ctl05_rdbUser" type="radio" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$rdbUser" value="rdbUser"></span>

【问题讨论】：

标签： c# javascript jquery asp.net gridview

【解决方案1】：

试试这个，

$(document).on("click", ".rdbUser", function() {
    // to uncheck all radios which are not checked
    $("input[type=radio].rdbUser").prop("checked", false);
    $(this).prop('checked',true);// check the current one only
});

【讨论】：

【解决方案2】：

我认为你应该使用RadioButton.GroupName 属性。

使用 GroupName 属性指定一组单选按钮以创建一组互斥的控件。当可用选项列表中只能选择一个时，您可以使用 GroupName 属性。

设置此属性后，一次只能选择指定组中的一个 RadioButton。

但是您可以使用 jquery 尝试此代码

$(document).on("click", ".rdbUser", function() {
    //Check if this radio button is checked
    if($(this).find("input[type=radio]").is(':checked'))
    {
        //Use .not() to exclude this
        //Use .prop() to set checked to false
        $(".rdbUser").not(this).find("input[type=radio]").prop("checked", false);
    }
});

【讨论】：

【解决方案3】：

使用change 事件而不是click

如果使用 jquery 版本 > 1.6 使用 prop 否则使用 attr

$(".rdbUser").change(function(){ 
   if($(this).prop("checked")){
     $("[id^='rdbUser']").not(this).prop("checked",false);
   }
});

【讨论】：

【解决方案4】：

希望这会有所帮助！ 'grdOrganization' 是 GridView 的 Id。

<script type="text/javascript">
        function ResetRadioBtns(rb) {
            var gv = document.getElementById("<%=grdOrganization.ClientID%>");
            var rbs = gv.getElementsByTagName("input");
            var row = rb.parentNode.parentNode;
            for (var i = 0; i < rbs.length; i++) {
                if (rbs[i].type == "radio") {
                    if (rbs[i].checked && rbs[i] != rb) {
                        rbs[i].checked = false;
                        break;
                    }
                }
            }
        }    

    </script>

      <asp:TemplateField ItemStyle-HorizontalAlign="Left">
                        <ItemTemplate>
                            <asp:RadioButton ID="rbtnMaster" runat="server" onclick="ResetRadioBtns(this)" />
                        </ItemTemplate>
                    </asp:TemplateField>

【讨论】：