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>

点击radiobutton

调用此函数

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属性。如果使用它，它将最终作为输入的名称属性，替换为在此处引起问题的生成的值。只需使用常规名称属性，它就会移到范围。

现在，要在浏览器中固定名称，您可以执行以下操作。我使用了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类，并在页面加载时运行该功能。

我们如何在转发器内组合单选按钮？

4 个答案: