HTML - 如果单击文本，则不会切换自定义单选按钮答案

【问题标题】：HTML - custom radio button not toggled if clicking the textHTML - 如果单击文本，则不会切换自定义单选按钮
【发布时间】：2018-03-08 18:42:05
【问题描述】：

我使用这个结构构建了一个自定义的radio button。但是使用此配置我无法单击文本来切换收音机，任何想法为什么这不起作用？

                <div class="form-group">
                    <label class="custom-control custom-radio">
                        <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <span class="custom-control-description">test</span>
                </div>

【问题讨论】：

标签： html css sass radio-button

【解决方案1】：

您可以通过在标签元素内移动文本来实现此目的。

点击标签也将点击其关联的表单输入。您可以将标签和表单输入与“for”HTML 属性相关联（根据 zmuci 的回答），或者使用标签元素包装您的输入（您已经在这样做）。

在您的情况下，您试图单击标签之外的一些文本（因此与输入没有任何关联）。

<div class="form-group">
    <label class="custom-control custom-radio">
        <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">test</span>
    </label>
</div>

【讨论】：

【解决方案2】：

您需要“连接”文本和输入，您需要将for 属性添加到label 标签。

所以你的 HTML 应该是这样的：

<div class="form-group">
  <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
  <label class="custom-control custom-radio" for="pefrormanceRadio">Test</label>
  <span class="custom-control-indicator"></span>
</div>

或者，如果您无法更改 HTML，Den Biswajit 的答案是正确的。但是你应该知道，从语义/可访问的角度来看，输入应该有一个有意义的标签。

【讨论】：

【解决方案3】：

请在标签内添加custom-control-description并更新css

<div class="form-group">
  <label class="custom-control custom-radio">
    <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">test</span>
  </label>
</div>

【讨论】：

【解决方案4】：

你可以使用 jquery 来做到这一点

$("label").click(function(){
$("#pefrormanceRadio").attr('checked', 'checked'); 
});

【讨论】：