单击文本以选择相应的单选按钮 [英] Clicking the text to select corresponding radio button

问题描述

我正在使用PHP创建一个测验Web应用程序。每个问题由一个单独的< label> 组成，有4个可能的选择，使用单选按钮以选择他/她的答案。单个问题的当前HTML如下：

I'm creating a quiz web application using PHP. Each question is comprised of a separate <label> and has 4 possible choices, using radio buttons to allow the user to select his/her answer. The current HTML for a single question looks like:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

我希望用户可以点击与单选按钮相关联的文本。现在，用户只能点击单选按钮本身 - 我觉得这是一个相当麻烦的任务。

I would like the user to have the option of clicking on the text associated with radio button. Right now, the user can only click on the radio button itself - which I find to be a quite cumbersome task.

我阅读了无法通过点击选择文本来选择特定的单选按钮选项，并且建议指向使用于和 id 标记的属性匹配。我已经这样做，它仍然不工作。

I read Unable to select a particular radio button choice by clicking on the choice text and the suggestion points toward making the for and id attributes of the tags match. I have done this and it still doesn't work.

我的问题是：我想点击< input type =radio> ; 对象，而不是只能选择单选按钮本身。我知道我以前读过这个，但似乎找不到任何解决我的问题。任何帮助或建议都非常感谢！

My question is: I'd like to be able to click the text of an <input type="radio"> object, as opposed to only being able to select the radio button itself. I know I've read about this before but can't seem to find any solution to my problem. Any help or suggestions are much appreciated!

推荐答案

在代码中，您在表单本身上有一个标签。您想要为每个单独的广播组添加标签，如下所示。

In your code, you've got a label on the form itself. You want to put labels on each individual radio group, as shown below.

<form>
    <p>What is my middle name?</p>
    <br>
    <input id="349" type="radio" value="1" name="question1">
    <label for="349">Abe</label>
    <br>
    <input id="350" type="radio" value="2" name="question1">
    <label for="350">Andrew</label>
    <br>
    <input id="351" type="radio" value="3" name="question1">
    <label for="351">Andre</label>
    <br>
    <input id="352" type="radio" value="4" name="question1">
    <label for="352">Anderson</label>
    <br>
</form>

Live example

您应该记住，两个元素不应该具有相同的ID。使用 name 属性，使单选按钮作为一个组，并且一次只允许单个选择。

You should keep in mind that two elements should never have the same ID. The name attribute is used so that the radio buttons function as a group and only allow a single selection at a time.

这篇关于单击文本以选择相应的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！