单击标签内的文本框时，选择收音机

Question

当单击标签标签内的textbox时，我也希望选择相关的无线选项。(就像单击标签标签中的单词时，它会选择相关的无线选项)

我已经设置了下面的问题，有一个简单的CSS解决方案吗？如果不是，JS或JQuery解决方案可以作为替代方案。

HTML设置：

<input id="radio-1" type="radio" name="my-radio" >
<label for="radio-1"> Enter Value 1:
  <input type="text" > <!-- clicking this needs to select radio-1 -->
</label>

<input id="radio-2" type="radio" name="my-radio" >
<label for="radio-2"> Enter Value 2:
  <input type="text" > <!-- clicking this needs to select radio-2 -->
</label>

JS Fiddle演示：https://jsfiddle.net/f8zpxmnk/1/

编辑:如需澄清，请参阅图片

​

​

编辑2:下面是我想要做的更深入的JSFiddle。我使用的是自定义图标，而不是单选按钮，不确定这是否有区别。

既然您说每个输入只应该有一个标签，那么是否有更好的方法来构造HTML呢？

https://jsfiddle.net/y4pzawkm/1/

Answer 1

您的代码是糟糕的设计，您不应该在<label for>元素中有不相关的输入！想想可访问性！

<label>元素can和应该只引用一个formElement。通过包装它或ID引用-使用for属性。

因此，删除for属性，更改HTML并使用一些jQuery：

代替：

​

$('[data-for]').on("click", function() { // on text input click...
  $($(this).data("for")).prop("checked", true); // get selector and make checked
});

<label>
    <input id="radio-1" type="radio" value="1" name="my-radio" >
    Enter Value 1:
</label>
<input data-for="#radio-1" type="text" placeholder="click me" >

<br><br>

<label>
    <input id="radio-2" type="radio" value="2" name="my-radio" >
    Enter Value 2:
</label>
<input data-for="#radio-2" type="text" placeholder="click me" >



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

我甚至无法想象在玩完上面的游戏后你到底想要什么。但是希望这个解决方案至少有助于改善你的UI想法。