How to loop through a radio button list

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.

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.

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

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:

1. Select all radio buttons with the appropriate class

2. 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") }
   );
   

3. 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")
   

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

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
}