jQuery 如何循环浏览单选按钮列表

How to loop through a radio button list

提问by Steven Zack

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:

我在网上搜了一下，没有找到在.net中选择radiobuttonlist控件的好方法，所以我给每个radiobuttonlist加了一个类，用类选择器来循环每个，然而，似乎只要一个改变，所有的改变。看我的代码如下：这是jQuery部分：

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.

我想要做的是在提交表单之前检查所有 radiobuttonlist 控件是否具有其选定的值。但它的工作原理就像一个选择了值，无论天气如何，该函数都会返回 true 另一个选择了值。请帮助我解决这个问题。先感谢您。

回答by fredw

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.

这将检查每个组并确定在该组中是否选择了一个 radiobuttom。关键是$(this).find('..')返回当前组中所有“已选中”的单选按钮，如果没有选择则为零，如果选择了则为 1。

回答by Phil.Wheeler

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.

是的，您的函数将返回 true，因为它首先假设其条件为“true”。当它遍历“RadioButtonList1”并找到一个被选中的控件（我假设默认情况下是一个）时，它也会返回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();
});

回答by Homer

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

这将验证每个 RadioButtonList 是否有一个选中的项目。因此，如果有 2 个列表和 2 个选中的项目，则返回 true。

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

回答by R0MANARMY

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

如果我正确理解您的问题，您希望确保RadioButtonList在提交之前每个人都选择了某些内容。有几种方法可以实现这一点。

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.

看起来您正在使用 WebForms，因此您不需要接触 jQuery，您可以使用RequiredFieldValidator（每个一个RadioButtonList）来完成此操作，然后一切就绪。

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:

如果您想采用 jQuery 方式，那么将您的问题视为“是否有任何 RadioButtonList 没有选择项目”会更容易。回答你：

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 manyways to accomplish this, some are easier than others. You can use the maputility 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 checkedradio buttons with the appropriate class (as it's a radio button list, you can't have more than one checkedelement 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.

1. 选择所有具有适当类的单选按钮

2. 获取不同的名称列表（因为这就是单选按钮的分组方式）。有很多方法可以实现这一点，有些方法比其他方法更容易。您可以使用地图实用程序来创建名称列表（然后可以区分）

   var all = $.map( 
       $(".rbl input:radio"),
       function(n, i){ return n.attr("name") }
   );
   

3. 选择checked具有适当类的所有单选按钮（因为它是一个单选按钮列表，一次不能有多个checked元素，因此它们将是唯一的）

   var selected = $(".rbl input:radio:checked")
   

4. 比较列表以查看它们的大小是否相同。如果是，则每个列表都选择了一个项目，如果不是，则至少有一个列表没有选择任何项目。您也可以使用 map 实用程序将其转换为名称列表，但这不是必需的，因为您只是比较数组长度。

If you also want to know whichradio 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 allbut not in selected.

如果您还想知道哪个单选按钮列表没有选定的值，您需要在第 3 步中的数组上应用 map 实用程序，然后查看哪些名称在 中all但不在 中selected。