CODEWITHSUNDEEP
asp.net
Rajbir Singh
Rajbir Singh

Reputation: 1691

How we can group radio buttons inside a repeater?

I have a radio button inside a repeater as follow.

<asp:Repeater ID="rpt" runat="server">
    <ItemTemplate>
        <asp:RadioButton ID="rbtnCityName" runat="server" Text='<%# Bind("CityName") %>'
            GroupName="Cities" />
    </ItemTemplate>
</asp:Repeater>

Now problem is that how I can select a single radio button across multiples. Even though I have given a groupname for radio button, I am not able to select any of them.

Upvotes: 8

Views: 10271

Answers (4)

Pankaj
Pankaj

Reputation: 10105

<script type="text/javascript" language="javascript">  

    function fnCheckUnCheck(objId)  
    {
        var grd = document.getElementById("<%= rpt.ClientID %>");  
        var rdoArray = grd.getElementsByTagName("input");  

        for(i=0;i<=rdoArray.length-1;i++)  
        {  
            if(rdoArray[i].type == 'radio')
            {
                if(rdoArray[i].id != objId)  
                {  
                    rdoArray[i].checked = false;  
                }  
            }
        }  
    }  
</script>

call this function on click of radiobutton

onclick="fnCheckUnCheck(this.id);"

Upvotes: 3

Matt
Matt

Reputation: 171

Just adding another solution in case someone else is still running into this in 2020...

It does use JavaScript.

If you inspect the radio button in the browser's dev tools you'll see that the RadioButton control is rendered as a span with an input inside it, just like other input controls such as CheckBox.

So this:

<asp:RadioButton runat="server" class="my-class" name="myGroup" value="myGroupOption1" />

Ends up as something like this:

<span name="myGroup" class="my-class">
  <input id="(long generated id)" type="radio" name="(generated name)" value="myRadioButton">
</span>

Notice I didn't use ASP.NET's GroupName attribute. If you use that it will end up as a name attribute on the input, replaced with the generated value that is causing problems here. Just use the regular name attribute and it gets moved to the span.

Now, to fix the names in the browser you can do something like this. I used JQuery, but you could accomplish the same with pure JavaScript.

$(document).ready(function () {
    $('.my-class').each(function () { // find all the spans
        if ($(this).attr('name')) {
            var groupName = $(this).attr('name'); // save the group name

            $(this).children('input').each(function () { // find the input
                $(this).attr('name', groupName); // fix the name attribute
            });
        }
    });
});

Now the radio buttons are grouped properly.

So add a unique CSS class to your radio buttons and run that function on page load.

Upvotes: 1

Sebastien H.
Sebastien H.

Reputation: 7166

the best solution for me was to simlpy create an html input control inside the repeater:

  <input type="radio" name="yourGroup" value='<%# Eval("Value") %>'/>

got the solution from Radio button repeater problem solved

Upvotes: 3

Andrew
Andrew

Reputation: 1

$('#SubmitAnswers').click(function () {
          var names = [];

          $('input[type="radio"]').each(function () {
              // Creates an array with the names of all the different checkbox group.
              names[$(this).attr('name')] = true;
          });

          // Goes through all the names and make sure there's at least one checked.
          for (name in names) {
              var radio_buttons = $("input[name='" + name + "']");
              if (radio_buttons.filter(':checked').length == 0) {
                  // alert('none checked in ' + name);
                  $('#Group'+ name).css("visibility", "visible");
              }
              else {
                  // If you need to use the result you can do so without
                  // another (costly) jQuery selector call:
                  var val = radio_buttons.val();
                  $('#Group' + name).css("visibility", "hidden");
              }
          }



      });

Upvotes: 0

Related Questions