单选按钮未选择选项答案

【问题标题】：Radio button not selecting option单选按钮未选择选项
【发布时间】：2018-12-20 00:05:38
【问题描述】：

请原谅任何误解；我对 HTML/Bootstrap 很陌生。

我有一组单选按钮，每个按钮都有自己的标签，用户可以选择。标签本身（Bootstrap 将其视为按钮？）是可点击的，但是，单选按钮不可点击，但仍会突出显示相应的标签。有人可以解决这个问题吗？我需要能够在答案（标签或单选按钮）上单击 anywhere 并显示选中的单选按钮和标签。我已经尝试了所有我能想到的... 这是我正在做的一些示例代码：

<div class="col-sm-12">
  <div class="btn-group btn-group-toggle btn-group-lg btn-group-justified" data-toggle="buttons">
    <div class="form-group">
      <label class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
        <input type="radio" name="Q1" id="A1"
          value="TEST TEXT." 
          style="margin-left:10px;" required/> &nbsp;&nbsp;TEST TEXT
      </label>
    </div>
    <div class="form-group">
      <label for="Q1A2" class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
        <input type="radio"  name="Q1" id="A2" 
          value="TEXT TBD" 
          style="margin-left:10px;" required />&nbsp;&nbsp;TEXT TBD
      </label>
    </div>

【问题讨论】：

当我试用您的代码（我将其转换为 sn-p）时，我能够通过单击单选按钮来选择选项。我正在使用火狐；您使用的是哪个浏览器？您是否在代码中包含了 sn-p 包含的所有三个外部文件：jQuery、Bootstrap CSS、Bootstrap JavaScript？
也许这是一个特定于浏览器的问题呢？我正在用 Chrome 运行它，并且还将在我认为使用 IE 的平板电脑上运行它。需要注意的一点是，当我选择单选按钮时，它会突出显示标签，但不会激活单选按钮本身。
这个引导类和输入不需要引导 js 和 jquery

标签： javascript html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

就是这样。标签的 for 属性应该等于输入的 id 属性。

btn 类也适用于非单选框和复选框的按钮

label {
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
}

label:hover {
  background-color: #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-12">
  <div class="form-group">
    <label for="A1">
        <input type="radio" name="Q1" id="A1" value="1" required checked/> TEST TEXT
      </label>
  </div>
  <div class="form-group">
    <label for="A2">
        <input type="radio" name="Q1" id="A2" value="2" required/> TEXT TBD
      </label>
  </div>
</div>
</div>

【讨论】：

您好，我修复了 for 属性 (for="A1"/for="A2") 并将类更改为 radio-inline。但是，现在我将其更改为 radio-inline，它不再突出显示文本区域，因为它不再是“btn”。嗯……
有很多方法可以做到这一点。我已经更新了答案

【解决方案2】：

for="Q1A2"

这不应是名称和 ID 的组合。使名称唯一并应用标签的 for 属性。

<label for="item1">Item1</label><input type="radio" name="item1" style="margin-left:10px;" required />
<label for="item2">Item2</label><input type="radio" name="item2" style="margin-left:10px;" required />

【讨论】：