我们如何在中继器中对单选按钮进行分组？

Question

我在转发器中有一个单选按钮，如下所示。

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

现在的问题是我如何跨多个选择单个单选按钮。 即使我为单选按钮指定了组名，我也无法选择其中任何一个。

Answer 1

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

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

   //Collect A
   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>

单击单选按钮调用此函数

onclick="fnCheckUnCheck(this.id);"

Answer 2

对我来说最好的解决方案是在转发器中简单地创建一个 html 输入控件：

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

从Radio button repeater problem solved得到解决方案

Answer 3

$('#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");
              }
          }



      });

Answer 4

只需添加另一个解决方案，以防其他人在 2020 年仍然遇到此问题...

它确实使用 JavaScript。

如果您在浏览器的开发工具中检查单选按钮，您会看到 RadioButton 控件呈现为其中包含输入的跨度，就像 CheckBox 等其他输入控件一样。

所以这个：

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

最后是这样的：

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

请注意，我没有使用 ASP.NET 的 GroupName 属性。如果您使用它，它将最终作为输入上的名称属性，替换为在此处导致问题的生成值。只需使用常规的 name 属性，它就会被移动到 span。

现在，要修复浏览器中的名称，您可以执行以下操作。我使用了 JQuery，但您可以使用纯 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
            });
        }
    });
});

现在单选按钮已正确分组。

因此，为您的单选按钮添加一个独特的 CSS 类并在页面加载时运行该功能。