How to loop through a radio button list

Question

I searched online and didn't find a good method to select radiobuttonlist control in .net So I add a class to each radiobuttonlist and using class selector to loop each, however, it seems that whenever one changes, all change. See my code as follows: This is jQuery part:

function Checkform() {
    result=true;
    $('.rbl').each(function() {
            var cc = $(this + "[checked]").val();
            if (cc == undefined) {
                result = false;
                return false;
            }
        });
        return result;
    }

This is web part:

<form id="form1" runat="server" onsubmit="return Checkform();">
<asp:RadioButtonList ID="RadioButtonList1" class="rbl"  runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
    </asp:RadioButtonList>

    <asp:RadioButtonList ID="RadioButtonList2" class="rbl" runat="server" 
        RepeatDirection="Horizontal">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
    </asp:RadioButtonList>

What I want to do is to check if all radiobuttonlist control has its selected value before submitting the form. But it works like as one has selected value, the function will return true no matter weather the other one has selected value. Please help me on this issue. Thank you in advance.

fredw · Accepted Answer · 2016-06-21T21:39:52.410

How about this:

function Checkform() {
    var result = true;
    $('.rbl').each(function() {
        var checked = $(this).find('input:radio:checked');
        if (checked.length == 0) {
            result = false;
            return;
        }
    });
    return result;
}

This will examine each group and determine if there is a radiobuttom selected within that group. The key is $(this).find('..') which returns all the "checked" radio buttons within the current group which is zero if none are selected, and 1 if one is selected.

score 1 · Answer 2 · answered Apr 13 '11 at 21:06

1

Yes, your function will return true because it starts by assuming its condition is "true" first. When it loops through "RadioButtonList1" and finds a control that is selected (which I'm assuming one will be by default), it will also return true.

Try the following code:

var checkedRadioButtons = $('#form1 .rbl input:checked');

This line will return only those radio buttons whose value is set to checked. You can then iterate over those elements to get more information, such as their value:

checkedRadioButtons.each(function(Index){
   return $(this).val();
});

answered Apr 13 '11 at 21:06

Phil.Wheeler

16,748
10
99
155

I think he's doing something along the lines of a required field validation where you have to select something from each list. – Roman Apr 13 '11 at 21:18
So how to make sure both radiobuttonlist has been selected one option? – Steven Zack Apr 13 '11 at 21:28
Ah. Struggled a bit with the wording of the question. – Phil.Wheeler Apr 13 '11 at 22:12

Homer · Answer 3 · 2011-04-14T13:06:30.207

0

This will validate that each RadioButtonList has a checked item. So, if there are 2 lists and 2 checked items then it returns true.

function Checkform() {
    return $(".rbl :checked").length == $(".rbl:has(:radio)").length
}

edited Apr 14 '11 at 13:06

answered Apr 13 '11 at 21:13

Homer

7,594
14
69
109

Unfortunately in his case there are two different lists with the same class. This will tell you if either of them has something selected, not if both have something selected. – Roman Apr 13 '11 at 21:18
I know, but I didn't get that he needed that from the description. – Homer Apr 13 '11 at 21:31
I updated the code. Now it will validate that all "rbl" RadioButtonLists have a checked item. – Homer Apr 13 '11 at 21:41
No it won't, take a look at [this question](http://stackoverflow.com/questions/1070960/set-a-css-class-on-an-asp-net-radiobuttonlist-listitem), the RadioButtonList class renders some REALLY horrible HTML. – Roman Apr 13 '11 at 21:44
I know it's rendered in some funky html, but that doesn't matter. '$(".rbl")' is the number of RadioButtonLists (which is the RadioButtons wrapped in a table). '$(".rbl :checked")' is the number of checked items in a "rbl" table. Since you can only have one RadioButton checked in each group, this code should work. – Homer Apr 13 '11 at 21:52
It's not always a table, and if you look at the example I linked to, it adds the class not just to the outside table/list/etc but also to each individual row. – Roman Apr 13 '11 at 21:59
Ah, I see. Well to account for that you just make sure you are picking containers when doing the compare. I've edited the code to fix address that problem. – Homer Apr 14 '11 at 13:05

Roman · Answer 4 · 2011-04-13T21:57:47.917

If I understand your question correctly you want to ensure that every RadioButtonList has something selected before you submit. There are a couple of ways to accomplish this.

It looks like you're using WebForms so you don't need to touch jQuery, you could accomplish this with a RequiredFieldValidator (one for each RadioButtonList) and you're all set.

If you want to go the jQuery way then it's easier to think of your question as "Do any RadioButtonLists NOT have an item selected." To answer it you:

Select all radio buttons with the appropriate class
Get a distinct list of names (as that's how radio buttons are grouped). There are many ways to accomplish this, some are easier than others. You can use the map utility to create a list of names (which you can then make distinct)
```
var all = $.map( 
    $(".rbl input:radio"),
    function(n, i){ return n.attr("name") }
);
```
Select all checked radio buttons with the appropriate class (as it's a radio button list, you can't have more than one checked element at a time so they will be unique)
```
var selected = $(".rbl input:radio:checked")
```
Compare the lists to see if they are the same size. If they are then each list has one item selected, if they are not then at least one list doesn't have any items selected. You could use the map utility to turn this into a list of names as well, but it's not necessary as you're just comparing array lengths.

If you also want to know which radio button list(s) doesn't have a selected value, you will need to apply the map utility on the array from step 3 and then see which names are in all but not in selected.

How to loop through a radio button list

4 Answers4