动态生成单选按钮组允许多选问题的解决方法（HTML/CSS/JS+C#后端）

嘿，这个问题其实很常见，核心原因就是单选按钮的分组规则没遵守——咱们一步步来解决：

一、修复多个单选按钮可同时选中的问题 #

HTML里的单选按钮（radio）要实现同一组只能选一个的功能，必须给同一组的所有按钮设置相同的name属性。你当前的代码里没给input添加name，导致每个单选按钮都是独立分组，自然可以同时选中多个。

修改你的循环代码，给每个radio加上统一的name，同时把item的值设为value（方便后续获取选中项）：

<div class="demo-container size-thin"> 
  <div class="RadListBox RadListBox_Silk" > 
    <div class="rlbGroup"> 
      <ul> 
        <% foreach (var item in dataname) { %> 
        <li> 
          <!-- 添加name属性实现分组，同时设置value为当前item的值 -->
          <input type="radio" name="selectedItem" value="<%= item %>" /> 
          <img alt="" src="Images/<%=item %>.png"> 
          <%= item%>
        </li> 
        <% } %>
      </ul>
    </div>
  </div>
</div>

这样所有单选按钮就属于同一个selectedItem分组，运行时就只能选中其中一个了。

二、获取选中值并传递到后端 #

根据你的场景，有两种常用实现方式：

1. 传统表单提交（页面刷新） #

把单选按钮列表放在<form>标签内，提交表单后直接在后端通过Request.Form获取选中值：

前端表单代码：

<form method="post" action="/YourBackendPage.aspx">
  <!-- 这里放修改后的单选按钮列表 -->
  <div class="demo-container size-thin"> 
    <div class="RadListBox RadListBox_Silk" > 
      <div class="rlbGroup"> 
        <ul> 
          <% foreach (var item in dataname) { %> 
          <li> 
            <input type="radio" name="selectedItem" value="<%= item %>" /> 
            <img alt="" src="Images/<%=item %>.png"> 
            <%= item%>
          </li> 
          <% } %>
        </ul>
      </div>
    </div>
  </div>
  <button type="submit">提交选择</button>
</form>

后端C#代码（ASP.NET WebForms示例）：

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        // 获取选中的单选按钮值
        string selectedValue = Request.Form["selectedItem"];
        if (!string.IsNullOrEmpty(selectedValue))
        {
            // 这里处理业务逻辑，比如存入数据库、校验等
            Response.Write($"你选中的项是：{selectedValue}");
        }
        else
        {
            Response.Write("请先选择一个选项");
        }
    }
}

2. AJAX异步提交（无刷新） #

如果不想刷新页面，可以用JS获取选中值，再通过AJAX发送到后端接口：

前端JS代码（原生JS示例）：

function submitSelection() {
    // 获取选中的单选按钮
    const selectedRadio = document.querySelector('input[name="selectedItem"]:checked');
    if (!selectedRadio) {
        alert("请先选择一个选项");
        return;
    }
    const selectedValue = selectedRadio.value;

    // 发送AJAX请求到后端
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/YourBackendApi/SubmitSelection", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function() {
        if (xhr.status === 200) {
            alert("提交成功！");
            console.log("后端返回结果：", xhr.responseText);
        } else {
            alert("提交失败，请重试");
        }
    };
    xhr.send(`selectedValue=${encodeURIComponent(selectedValue)}`);
}

给按钮绑定这个函数：<button onclick="submitSelection()">提交选择</button>

后端C#接口代码（ASP.NET Web API示例）：

[HttpPost]
public IHttpActionResult SubmitSelection(string selectedValue)
{
    if (string.IsNullOrEmpty(selectedValue))
    {
        return BadRequest("请选择一个选项");
    }
    // 处理业务逻辑
    return Ok($"已接收选中值：{selectedValue}");
}

内容的提问来源于stack exchange，提问作者sourav