web-dev-qa-db-ja.com

テキストをクリックして、対応するラジオボタンを選択します

PHPを使用してクイズWebアプリケーションを作成しています。各質問は個別の<label>で構成され、radio buttonsを使用してユーザーが回答を選択できるようにする4つの選択肢があります。 1つの質問に対する現在のHTMLは次のようになります。

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

ユーザーにラジオボタンに関連付けられたテキストをクリックするオプションを提供したいと思います。現時点では、ユーザーはラジオボタン自体をクリックするだけです。 -これは非常に面倒な作業だと思います。

選択テキストをクリックして特定のラジオボタンの選択を選択できない と、タグのfor属性とid属性を一致させるための提案ポイントを読みました。私はこれをしましたが、まだ機能しません。

私の質問は：ラジオボタン自体を選択できるだけでなく、<input type="radio">オブジェクトのテキストをクリックできるようにしたいです。私はこれについて前に読んだことがありますが、私の問題の解決策を見つけることができないようです。ヘルプや提案は大歓迎です！

htmlcssformsinputradio-button
79
Abundnce10

コードには、フォーム自体にラベルがあります。以下に示すように、個々のラジオグループにラベルを付ける必要があります。

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

2つの要素に同じIDを使用しないでください。 name属性は、ラジオボタンがグループとして機能し、一度に1つの選択のみを許可するように使用されます。

160
Nathan

Nathanの回答に従って行うと、ラジオボタンとラベルの間にクリックできないスペースが少しあるようです。シームレスに参加させる方法は次のとおりです（ この記事 を参照）。

<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>
32
user21820

入力タグをラベルタグ内にネストすると、ラベルがラジオボタンのすぐ横に表示されます。以前に提案されたアプローチでは、ラベルファイルをhtmlファイル内のどこにでも配置でき、クリックすると関連するラジオボタンが選択されます。これをチェックしてください：

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

代わりにこの方法で行うと、この欠陥がなくなります。

<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>
1
Neo

ラベルタグは、各回答の周りにある必要があります。安倍、アンドリューなどであり、それぞれに固有である必要があります。

1
endyourif

私はこれを何年もやっていますが、変数を使用してこれらのどちらも動作しません。

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

ここにソースがあります：

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

このようにできます

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

したがって、テキストまたはラベルをクリックすると、ラジオボタンが選択されます。しかし、これを行うと...

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

これを直前に書いたコードに追加すると、2番目のラベルをクリックするとラジオも選択されます。

0
Samuel Chen