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

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小提琴演示：https://jsfiddle.net/f8zpxmnk/1/

编辑：见图片澄清

编辑2：这是我想要做的更深入的JSFiddle。我正在使用自定义图标而不是单选按钮，不确定这是否有所不同。

既然你说每个输入只应该有一个标签，那么有更好的方法来构建HTML吗？

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

Answer 1

您的代码设计错误您不应在<label for>元素中包含无关的输入！考虑可访问性！

<label>元素可以，只能引用一个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想法。