我使用此结构构建了一个自定义单选按钮
。但是使用此配置我无法单击文本来切换 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>
最佳答案
您可以通过将文本移动到标签元素内来实现此目的。
单击标签也会单击其关联的表单输入。您可以将标签和表单输入与“for”HTML 属性相关联(根据 zmuci 的答案),或者使用 label 元素包装您的输入(您已经在这样做)。
在您的情况下,您试图单击标签外部的一些文本(因此与输入没有任何关联)。
<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 - 如果单击文本,自定义单选按钮不会切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49170630/