单选按钮是选择多个项目而不是选择一个项目答案

【问题标题】：Radio button is Selecting multiple items Instead of selecting one item单选按钮是选择多个项目而不是选择一个项目
【发布时间】：2018-11-30 07:50:07
【问题描述】：

我正在使用如下输入类型的收音机

<input type="radio" id={el.name} className="form-check-input" name={el.name} data-count={el.name} value={el.id} onChange={this.select_role.bind(this)} style={{margin: "4px 10px"}}/>{el.name}

OnChange 函数如下所示

 select_role(event){
    console.log(event.target);
    let attribute = document.getElementById(event.target.name);
    let sectorattrribute = attribute.getAttribute("data-count");
    this.setState({role_id : event.target.value, roleName: sectorattrribute})
  }

上述类型收音机的输出是

OnChange 控制台 lokks 如下所示

收音机应该只允许选择一个项目，但为什么我可以一次选择多个，而我也无法取消选择。

但是根据单选类型文档一次，一个项目被选中，另一个被取消选择，但它正在发生。

请指导我在哪里做错了。

[![在此处输入图片描述][4]][4]

【问题讨论】：

标签： javascript html reactjs radio-button

【解决方案1】：

您只需为所有单选按钮设置相同的名称字段，试试这个

示例

<!DOCTYPE html>
     <html>
     <body>

     <form action="">
       <input type="radio" name="role" value="male">Admin<br>
      <input type="radio" name="role" value="female">Agent<br>
      <input type="radio" name="role" value="other"> Director
      <input type="radio" name="role" value="manager">Manager
       <input type="radio" name="role" value="client">Client
      <input type="radio" name="role" value="super admin">Super Admin
         <input type="radio" name="role" value="admin 1">Admin 1
          <input type="radio" name="role" value="admin 2">Admin 2
     </form>

     <p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all 
     other radio-buttons with equal name become unchecked.</p>

     </body>
     </html>

【讨论】：

名称不应该是唯一的？根据名称，我将再做一个选择声明。所以我们不能让名字独一无二
如果我给出相同的名称它的工作但基于名称我正在验证其他选择语句所以我们不能使用唯一名称
请显示代码，您正在按名称进行验证
我已经给 id 属性赋予了唯一性，并且名称仍然相同。
让我们continue this discussion in chat。