I have 4 radiobuttons in each row of Gridview. I am using onClick method on each Radiobutton, But now i want ot use that use using Javascript / Jquery

I have 4 radiobuttons in each row of Gridview. I am using the onClick method on each Radiobutton, but now I want to use Javascript / jQuery.
This is code which I am using in behind (aspx.cs) file. But I want to use it using javascript / Jquery.

foreach (GridViewRow row in GridView1.Rows)
        {
            RadioButton rad1 = (RadioButton)row.FindControl("RadioButton1");
            RadioButton rad2 = (RadioButton)row.FindControl("RadioButton2");
            RadioButton rad3 = (RadioButton)row.FindControl("RadioButton3");
            RadioButton rad4 = (RadioButton)row.FindControl("RadioButton4");
            if (rad1.Checked == true)
            {
                rad2.Checked = false;
                rad3.Checked = false;
                rad4.Checked = false;
            } if (rad2.Checked == true)
            {
                rad1.Checked = false;
                rad3.Checked = false;
                rad4.Checked = false;
            } if (rad3.Checked == true)
            {
                rad1.Checked = false;
                rad2.Checked = false;
                rad4.Checked = false;
            } if (rad4.Checked == true)
            {
                rad1.Checked = false;
                rad2.Checked = false;
                rad3.Checked = false;
            }
        }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Arun is correct about the naming thing, but If you want each radio button to be named something different then you can set the checked property to false this way.

$(document).on('click','.radio-class',function(){
  $this = $(this);
  // uncheck all other radio inputs except this one
  $('.radio-class').not($this).prop('checked', false);
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>

  <input type="radio" class="radio-class" name="RadioButton1" id="rad1"  />
  <input type="radio" class="radio-class" name="RadioButton2" id="rad2"  />
  <input type="radio" class="radio-class" name="RadioButton3" id="rad3"  />
  <input type="radio" class="radio-class" name="RadioButton4" id="rad4"  />
  
  
</body>
</html>

Method 2

If you give same value for name property, then automatically only one among those radio buttons can be selected.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Radio button demo</title>
</head>

<body>
  <input type="radio" name="commonName" id="rad1" onclick="alert('rad1 clicked !')" />
  <input type="radio" name="commonName" id="rad2" onclick="alert('rad2 clicked !')" />
  <input type="radio" name="commonName" id="rad3" onclick="alert('rad3 clicked !')" />
</body>

</html>

Method 3

Given that this is in a GridView I would think you want something like the following.

<asp:GridView runat="server">
    <Columns>
        <asp:TemplateField HeaderText="RadioButtons">
            <ItemTemplate>
                <asp:RadioButtonList runat="server" ID="radioButtonList">
                    <asp:ListItem>Item 1</asp:ListItem>
                    <asp:ListItem>Item 2</asp:ListItem>
                    <asp:ListItem>Item 3</asp:ListItem>
                    <asp:ListItem>Item 4</asp:ListItem>
                </asp:RadioButtonList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Now you should not need any javascript/jquery or onclick code behind.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x