対応するラジオボタンを選択するためのテキストをクリック

私はPHPを使用してクイズWebアプリケーションを作成しています。各質問は別々の<label>で構成され、ユーザーが回答を選択できるようにradio buttonsを使用して4つの選択肢があります。単一の質問の現在の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>

私はにユーザーを希望のラジオボタンに関連付けられたテキストをクリックするオプションがあります。今のところ、ユーザーはラジオボタン自体をクリックすることしかできません。これはかなり面倒な作業です。

私はUnable to select a particular radio button choice by clicking on the choice textを読んで、forタグとidタグの属性を一致させるための提案のポイントが一致します。私はこれをして、それはまだ動作しません。

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

出典

2011-10-22 Abundnce10

136

コードには、フォーム自体にラベルが付いています。以下に示すように、各ラジオグループにラベルを貼りたいとします。

<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つの選択のみを許可するように使用されます。

出典

2011-10-22 23:23:20 Nathan

を。タグのほとんど隠された特徴が再発見されたときにそれを愛してください – foochow

ラベルタグは各回答の前後にある必要があります。 Abe、Andrew、etc ...の周りにあり、それぞれのためにユニークである必要があります。

出典

2011-10-22 23:24:04 endyourif

Nathanの回答によれば、ラジオボタンとラベルの間にはクリッカブルでないスペースがあるようです。ここで（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>

出典

2015-12-14 12:27:51 user21820

私はこの答えを好む。しかし、あなたはこのアプローチで "for"属性が必要でさえあると確信していますか？ – Piddu

@Piddu：あなたが正しいと思うので、私は自分の答えを更新しました。ありがとう！ – user21820

テキストをクリックするか、それがラジオボタンを選択し、ラベルを付けるので、もしあなたがこの

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

のようにそれを行うことができます。しかし...あなたがこれを行う場合

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

、あなたが第二のラベルをクリックした場合、私はちょうどこの前書いたコードは、その後、それはまた、ラジオを選択します何にこれを追加します。

出典

2016-10-10 01:19:08

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

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

出典

2017-10-14 13:52:38 Neo

対応するラジオボタンを選択するためのテキストをクリック

答えて

関連する問題