Question

我使用此结构构建了自定义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>

Answer 1

您可以通过在label元素中移动文本来实现此目的。

单击标签也会单击其关联的表单输入。您可以将标签和表单输入与＆＃39; for＆＃39;相关联。 HTML属性（根据zmuci的回答）或者使用label元素（你已经在做）来包装你的输入。

在您的情况下，您尝试单击标签外的某些文本（因此不会以任何方式与输入关联）。

＆＃13;

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

＆＃13;

Answer 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的回答是正确的。但是你应该意识到，从语义/可访问的角度来看，输入应该有一个有意义的标签。

Answer 3

你可以使用jquery

来做到这一点

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

Answer 4

请在标签内添加自定义控制说明并更新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>

HTML - 如果点击文字

4 个答案: