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

Question

我使用此结构构建了一个自定义单选按钮。但是，使用此配置我无法单击文本来切换 radio ，知道为什么这不起作用吗？

                <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

您可以通过将文本移动到标签元素内来实现这一点。

单击标签也会单击其关联的表单输入。您可以将标签和表单输入与“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>