为什么在 HTML 中单击相应的文本无法检查单选按钮？

Question

当用户单击“否”时，相应的单选按钮应与直接单击按钮一起被选中。以下是我的一个代码片段：

<span style="display: inline-block;">
    <label for="kug.bla0">
        <p>
            <input id="kug.bla0" type="radio" value="No" name="kug.bla[0]">
            No  
        </p>
    </label>
</span>

有什么办法可以做到完全不修改 HTML。请参阅 fiddle：

https://jsfiddle.net/zp9y75sv/

是否有任何小的 JQuery 片段适用于所有 50 个问题，这些问题在是，否格式中有类似的答案？

更新：

以上代码在客户端的开发环境中不起作用。他正在使用IE10。有什么特别的原因吗？ JS 控制台没有错误（Firebug）。

更新 2：只是为了更新，如果它是相关的，纯 CSS 被用于超出 span

<div class="pure-u-1 pure-u-md-1-5">.

会不会有什么问题？

更新 3：它看起来与 iframe 有问题，其中存在或某些第三方？

Answer 1

您的代码工作正常。也许您可以更改 <p> 和 <label> 顺序以获得更好的 html 支持。但是，如果它对您不起作用，可能是浏览器问题，请尝试更新。

适用于 IE 10/11、最新 Chrome 和 Safari

Answer 2

上面的代码片段是正确的，因此可以正常工作。变通后，我发现错误在下面解释的代码中：

对于那些收音机，它不工作是因为标签中的 FOR 值和输入中 ID 的值不同。

因为 for 属性指定标签绑定到哪个表单元素。我们必须将其绑定到ID；不要命名或其他一些值。

以下是演示相同内容的片段：

<label for="kug.bla[1]">
  <p>
  <input  id="kug.bla4" type="radio" value="JA" name="kug.bla[1]" >LabelForBoundByName</input>  
       </p>
</label>
<label for="kug.bla1">
<p>
<input id="kug.bla1" type="radio" value="Yes" name="kug.bla[0]">
    LabelForBoundById</input>  
</p>
</label>
<label for="Independent Label">
  <p>
  <input  id="kug.bla5" type="radio" value="JA" name="kug.bla[5]" >LabelForBoundByNothing</input>  
       </p>
    </label>

Link 到 jsfiddle：https://jsfiddle.net/zp9y75sv/2/

为什么在 HTML 中单击相应的文本无法检查单选按钮？

Why radio button is not getting checked by clicking corresponding text is not working in HTML?

html

label

internet-explorer-10