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

Posted 2023-05-09

【中文标题】如何使用 JQuery 取消选中 GridView 中的所有单选按钮？

【英文标题】：How to Uncheck All Radio Button inside GridView using JQuery?

【发布时间】：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>

【参考方案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>