Clicking the text to select corresponding radio bu

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.

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.

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!

标签： html css forms input radio-button

6条回答

孤傲高冷的网名

2楼-- · 2019-01-30 10:16

The label tag should be around each answer, e.g. around Abe, Andrew, etc... and it needs to be unique for each of them.

0人赞添加讨论(0) 举报

Emotional °昔

3楼-- · 2019-01-30 10:19

Nesting the input tag within the label tag ensures the label appears right next to the radio button. With the earlier approaches suggested, you can put the label tag anywhere within the html file and it will select the associated radio button when clicked. Check this out:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <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">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>

Doing it this way instead eliminates this flaw:

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

0人赞添加讨论(0) 举报

smile是对你的礼貌

4楼-- · 2019-01-30 10:20

You can do it like this

 <label for="1">hi</label>
 <input type="radio" id="1" />

So if you click on the text or label it selects the radio button. But if you do this...

<label for="1">//</label>

and you add this to what the code I wrote just before this then if you click on the 2nd label then it will also select the radio.

0人赞添加讨论(0) 举报

仙女界的扛把子

5楼-- · 2019-01-30 10:25

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>

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.

0人赞添加讨论(0) 举报

闹够了就滚

6楼-- · 2019-01-30 10:35

I have been doing this for years, but neither of these work for me, using variables.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

and here is the source:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />

0人赞添加讨论(0) 举报

甜甜的少女心

7楼-- · 2019-01-30 10:41

There seems to be a little unclickable space between the radio button and the label if done according to Nathan's answer. Here is how to make them join seamlessly (see this article):

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

0人赞添加讨论(0) 举报

Clicking the text to select corresponding radio bu

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间