blocks|key|249883|text|在您的代码中，您在窗体本身上有一个标签。您希望为每个单选按钮组添加标签，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249884|​|249885|<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>|code-block|syntax|javascript|249886|249887|您应该记住，两个元素永远不应该有相同的ID。使用name属性是为了使单选按钮作为一个组起作用，并且一次只允许一个选择。|offset|length|style|CODE|249888|entityMap^0|0|0|0|0|O|4|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;p&gt;What is my middle name?&lt;/p&gt;
  &lt;br&gt;
  &lt;input id="349" type="radio" value="1" name="question1"&gt;
  &lt;label for="349"&gt;Abe&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="350" type="radio" value="2" name="question1"&gt;
  &lt;label for="350"&gt;Andrew&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="351" type="radio" value="3" name="question1"&gt;
  &lt;label for="351"&gt;Andre&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="352" type="radio" value="4" name="question1"&gt;
  &lt;label for="352"&gt;Anderson&lt;/label&gt;
  &lt;br&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

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


blocks|key|2929596|text|标签标签应该在每个答案的周围，例如在Abe，Andrew等周围。而且对于它们中的每一个，它都需要是唯一的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2929597|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|248253|text|如果按照内森的回答，在单选按钮和标签之间似乎有一个无法点击的空格。下面是如何让它们无缝连接(参见this+article)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|248254|<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>|code-block|syntax|javascript|248255|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html.am/tags/html-label-tag.cfm^0|1C|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>There seems to be a little unclickable space between the radio button and the label if done according to <em>Nathan</em>'s answer. Here is how to make them join seamlessly (see <a href="http://www.html.am/tags/html-label-tag.cfm" rel="noreferrer">this article</a>):</p>

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


blocks|key|3144283|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144284|+<label+for="1">hi</label>
+<input+type="radio"+id="1"+/>|code-block|syntax|javascript|3144285|因此，如果您单击文本或标签，它将选中单选按钮。但如果你这么做..。|3144286|<label+for="1">//</label>|3144287|你将这个添加到我之前写的代码中，然后如果你点击第二个标签，它也会选择无线电。|3144288|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can do it like this</p>

<pre><code> &lt;label for="1"&gt;hi&lt;/label&gt;
 &lt;input type="radio" id="1" /&gt;
</code></pre>

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

<pre><code>&lt;label for="1"&gt;//&lt;/label&gt;
</code></pre>

<p>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.</p>


blocks|key|251855|text|在标签标签内嵌套输入标签可确保标签显示在单选按钮旁边。使用前面提出的方法，您可以将label标记放在html文件中的任何位置，当单击它时，它将选择相关的单选按钮。看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251856|​|251857|<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>|code-block|syntax|javascript|251858|251859|这样做反而消除了这个缺陷：|251860|251861|<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>|251862|251863|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>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:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;

&lt;form&gt;
  &lt;p&gt;What is my middle name?&lt;/p&gt;
  &lt;br&gt;
  &lt;input id="349" type="radio" value="1" name="question1"&gt;

  &lt;br&gt;
  &lt;input id="350" type="radio" value="2" name="question1"&gt;
  &lt;label for="350"&gt;Andrew&lt;/label&gt;
  &lt;br&gt;
  &lt;input id="351" type="radio" value="3" name="question1"&gt;

  &lt;br&gt;
  &lt;input id="352" type="radio" value="4" name="question1"&gt;
  &lt;label for="352"&gt;Anderson&lt;/label&gt;
  &lt;br&gt;
&lt;/form&gt;&lt;br/&gt;
&lt;p&gt;This is a paragraph&lt;/p&gt;
  &lt;label for="349"&gt;Abe&lt;/label&gt;&lt;br/&gt;
  &lt;label for="351"&gt;Andre&lt;/label&gt;
  
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Doing it this way instead eliminates this flaw:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;p&gt;What is my middle name?&lt;/p&gt;
  &lt;br&gt;
  
  &lt;label&gt;
    &lt;input id="349" type="radio" value="1" name="question1"/&gt;Abe
  &lt;/label&gt;
  &lt;br&gt;
  
  &lt;label&gt;
    &lt;input id="350" type="radio" value="2" name="question1"/&gt;Andrew
  &lt;/label&gt;
  &lt;br&gt;
  
  &lt;label&gt;
    &lt;input id="351" type="radio" value="3" name="question1"/&gt;Andre
  &lt;/label&gt;
  &lt;br&gt;
  
  &lt;label&gt;
    &lt;input id="352" type="radio" value="4" name="question1"/&gt;Anderson
  &lt;/label&gt;
  &lt;br&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3144348|text|我已经这样做很多年了，但这两种方法都不适合我，使用变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144349|++++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";|code-block|syntax|javascript|3144350|这就是源代码：|3144351|++++++++<input+type='radio'+name='student'+id='986875'+value='986875'>
++++++++<label+for='986875'>John</label>+Brown<br+/>|3144352|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

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

<p>and here is the source:</p>

<pre><code>        &lt;input type='radio' name='student' id='986875' value='986875'&gt;
        &lt;label for='986875'&gt;John&lt;/label&gt; Brown&lt;br /&gt;
</code></pre>


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

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

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

<p>I read <a href="https://stackoverflow.com/questions/3396351/unable-to-select-a-particular-radio-button-choice-by-clicking-on-the-choice-text">Unable to select a particular radio button choice by clicking on the choice text</a> and the suggestion points toward making the <code>for</code> and <code>id</code> attributes of the tags match.  I have done this and it still doesn't work.  </p>

<p>My question is: <strong>I'd like to be able to click the text of an <code>&lt;input type="radio"&gt;</code> object, as opposed to only being able to select the radio button itself.</strong>  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!</p>


Clicking the text to select corresponding radio button

我正在使用PHP创建一个测验web应用程序。每个问题由一个单独的<label>组成，并有4个可能的选项，使用radio buttons允许用户选择他/她的答案。单个问题的当前HTML如下所示：<label for="349">What is my middle name?</label><br><input id="3...

问单击文本以选择相应的单选按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击文本以选择相应的单选按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击文本以选择相应的单选按钮
EN