Question

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

<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控制台lokk如下

收音机应该只允许选择一项，但是为什么我一次只能选择多个而又不能取消选择。

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

请指导我在哪里做错了。

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

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

单选按钮正在选择多个项目，而不是选择一个项目

1 个答案: