如何循环遍历单选按钮列表

Question

我在网上搜索并没有找到一个好的方法来选择.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;
    }

这是一个网络部件：

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

我想要做的是在提交表单之前检查所有单选按钮列表控件是否有选择的值。但它的工作方式是，只要有一个选择了值，函数就会返回true，无论其他的是否选择了值。请帮我解决这个问题。提前感谢你的帮助。

- Steven Zack

Answer 1

这个怎么样？

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).find('..')，它返回当前组中所有“已选择”的单选按钮，如果没有选择任何一个，则返回零，如果选择了一个，则返回一。

- fredw

Answer 2

是的，你的函数会返回true，因为它首先假设它的条件是“true”。当它循环遍历“RadioButtonList1”并找到一个被选中的控件（我假设默认情况下会有一个被选中），它也会返回true。

尝试以下代码：

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

这行代码将仅返回那些值被设置为选中的单选按钮。然后，您可以迭代这些元素以获取更多信息，例如它们的值：

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

- Phil.Wheeler

---

我认为他正在进行所需字段验证的操作，其中您必须从每个列表中选择某些内容。 - Roman

那么如何确保两个 radiobuttonlist 都选择了一个选项呢？ - Steven Zack

啊，有点在问题的措辞上挣扎。 - Phil.Wheeler

Answer 3

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

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

- Homer

---

不幸的是，在他的情况下，有两个具有相同类别的不同列表。这将告诉您它们中是否有任何一个被选中，而不是两个都被选中。 - Roman

我知道，但从描述中我没有理解他需要那个。 - Homer

我更新了代码。现在它将验证所有“rbl” RadioButtonLists是否有选中的项目。 - Homer

我知道它渲染在一些时髦的HTML中，但那并不重要。 '$(".rbl")' 是 RadioButtonList 的数量（即包裹在表格中的 RadioButtons）。 '$(".rbl :checked")' 是“rbl”表格中选中项目的数量。由于每个组中只能有一个单选按钮被选中，所以这段代码应该可以正常工作。 - Homer

啊，我明白了。为了解决这个问题，你只需要在进行比较时确保选择容器即可。我已经编辑了代码来修复这个问题。 - Homer

Answer 4

如果我正确理解您的问题，您想确保在提交之前每个 RadioButtonList 都有选定的项目。 有几种方法可以实现这一点。

看起来您正在使用WebForms，因此不需要使用jQuery，您可以使用{{link1：RequiredFieldValidator}}（每个 RadioButtonList 一个）来完成操作。

如果您想使用jQuery，则更容易将问题看作“是否有任何RadioButtonLists未选择项目”。 要回答它，您可以：

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

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

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

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

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

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

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

- Roman