Question

我想要这样：当用户点击radiobutton标签时，它会自动点击单选按钮本身。目前，如果用户在radiobutton之后点击标签，则没有任何反应，迫使用户点击微小的无线电按钮本身。

有人建议使用＆＃39; for＆＃39;标签上的属性，但要这样做，我需要更改“ID”标识。第二种选择;通过这样做，表单会将两个选项都发布为已选中，因此在我的情况下它不会起作用。

这是html：

<form href="#">
<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label class="radio-label">Option one</label>
    <input type="radio" id="option1" name="option1" data-label="Option two" value="2"><label class="radio-label">Option two</label>  
    <input type="submit"/>
</form>

为实现这一目标，我尝试使用Jquery在每个标签上创建一个点击方法，使用类＆＃39; radio-label＆＃39;点击其radiobutton。类似下面的代码，但它不起作用：

 $('.radio-label').each(function (i) {
    $(this).previous().click();
});

Answer 1

使用<label>的{{3}}属性。

与标签元素在同一文档中的可标记表单相关元素的ID。文档中第一个具有与for属性值匹配的ID的元素是此label元素的标记控件。

<label for="option2" class="radio-label">Option two</label>

<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label for="option1" class="radio-label">Option one</label>
<input type="radio" id="option2" name="option1" data-label="Option two" value="2"><label for="option2" class="radio-label">Option two</label>

Answer 2

实际上你不需要任何js或jQuery代码。只需在for中加入label属性即可。根据它的值，提供指定单选按钮的id。

<input type="radio" id="option1" name="option1" data-label="Option one" value="1" /><label class="radio-label" for='option1'>Option one</label>
<input type="radio" id="option2" name="option1" data-label="Option two" value="2" /><label class="radio-label" for='option2'>Option two</label>

Answer 3

您可以将input标记包含在label标记内。就像这样：

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one
</label>
<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

Answer 4

您应该使用label for。

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label>
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

Solution（不需要js）

Answer 5

将输入标签放在足够的标签

中

＆＃13;

    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one</label>
    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

＆＃13;

Answer 6

你不需要任何js，只需使用这个

<label for="option2" class="radio-label">Option two</label>

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label>
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

点击标签点击radiobutton

6 个答案: