ラベルをクリックしてHTMLラジオボタンを切り替えます

87

小さなPHPプロジェクトに大きなJavascriptフレームワークを導入せずに、ラジオボタンを切り替える簡単な方法（近くのテキストがクリックされたとき）はありますか？

Webフォームは次のようになります。

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— アレクサンダーファーバー
ソース

164

次のように、aは含まれる入力に対して暗黙的にであるため、各要素にIDを付けずに要素をラップすることもできます<label>。

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— NickCraver
ソース

4

これにより、ラベルのスタイル設定が難しくなり、テキストをさらに多くの要素でラップする必要があります。

— ソビウト2014年

2

はい。ただし、スタイリングを行っていない場合は、必要な機能を簡単に取得できます。IDと「for」属性を追加する必要はありません。

— Dr. C. Hilarius 2014

4

+1 IDは非常に悪である可能性があるため、原則としてIDを回避するのが最善です

— Chris Stephens

ラッピングは使用に優れたソリューションであるidとforラッピング不可と。その理由は、ラベルのマージンが広く、ユーザーがチェックボックスとラベルの間のスイートスポットをクリックした場合（最も可能性が高いため）、何も起こらないためです。ここでフィドル：jsfiddle.net/v157ctja/5

— マーカス

72

<label>まさにそれを行うように設計された要素を使用できます。

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— フレデリックハミディ
ソース

1

@アレクサンダー、絶対に。Safariバージョン2以下のみがサポートしていません。

— フレデリックハミディ2010年

3

その後、セレクターinput#radCreateMode:checked ~ labelを使用してラベルにスタイルを適用できます。入力をラベル内にネストすると、選択時にスタイルをラベルに適用できません。

— Zuhaib Ali 2016

1

これは本当に受け入れられた答えであるはずです、それはこれをするための適切な方法です。

— greco.roamin

1

Safari v 13を使用していますが、この方法は機能しませんでした。ラジオボタンの選択を解除することはできますが、選択できません。入力の周りにラベルをラップする必要がありました：<label> <input> my label text </ label>。<form>も<fieldset>も使用していないことに注意してください。

— IAM_AL_X

for属性値が入力の正しいIDであることを確認してください。誰かが私と同じ間違いをした場合に備えて。

— Kevin .NET

5

ラベルの下に入力をラップすると機能するはずです。

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— ジェイソン・チン
ソース

1

この方法を使用してラジオボタンの値を見つけるのに問題がありました。別の方法は、ボタンのクリック可能な領域を増やすヒット領域を使用することです。

— クリストファー・グリッグ
ソース