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

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。我正在使用自定义图标而不是单选按钮，不确定这是否会有所不同。

既然你说每个输入应该只有 1 个标签，有没有更好的方法来构建 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 理念。