CODEWITHSUNDEEP
c#javascriptjqueryasp.netgridview
SHEKHAR SHETE
SHEKHAR SHETE

Reputation: 6056

How to Uncheck All Radio Button inside GridView using JQuery?

I have a Radio Button inside GridView. I want to Uncheck all the asp.net Radio Button except the current Selected one using JQuery. I have tried but no results..!

HTML Markup:

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

Code:

$(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);
            });

On SeeingMarkup in Chrome:

Checked RadioButton:

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

Unchecked RadioButton:

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

Upvotes: 3

Views: 2915

Answers (4)

VPP
VPP

Reputation: 779

Hope this helps!. 'grdOrganization' is the Id of GridView.

<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>

Upvotes: 0

Somnath Kharat
Somnath Kharat

Reputation: 3600

Use change event instead of click

IF using jquery version > 1.6 use prop else use attr

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

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(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
});

Upvotes: 2

Satpal
Satpal

Reputation: 133403

I think you should use RadioButton.GroupName property.

Use the GroupName property to specify a grouping of radio buttons to create a mutually exclusive set of controls. You can use the GroupName property when only one selection is possible from a list of available options.

When this property is set, only one RadioButton in the specified group can be selected at a time.

However you can try this code using 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);
    }
});

Upvotes: 1

Related Questions