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

ラジオボタンをトグルする簡単な方法がありますか？その近くのテキストをクリックすると小さなPHPフレームワークに大きなJavascriptフレームワークが導入されることはありませんか？HTMLラジオボタンのラベルをクリックして切り替えます

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>

出典

2010-11-18 Alexander Farber

130

をそれぞれのIDは<label>に含まれている入力に暗黙的に含まれているため、次のようになります。

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

出典

2010-11-18 09:23:59

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

はい、スタイリングしていない場合は、必要な機能を簡単に手に入れることができます。私は余分なIDと "for"属性を追加する必要はありません。 –

+1 IDは非常に悪いので、一般的なルールとして避けるのが最善です –

あなたはまさにそれを行うために設計されて<label>要素、使用することができます：あなたは、あなたの要素をラップすることができがそれらを与えることなく

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

出典

2010-11-18 09:16:16

ありがとうございます。ありがとうございます。現代のブラウザでも動作しますか？ –

@Alexander、絶対に。 Safariバージョン2以下でのみサポートされています。 –

その後、セレクタ 'input＃radCreateMode：checked〜label'を使って、ラベルにスタイルを適用することができます。ラベルの中に入力を入れ子にすると、選択時にラベルにスタイルを適用することはできません。 –

ラベルの下に入力を折り返すと効果があります。

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

出典

2015-11-29 03:14:37

この回答はidプロパティに依存しません - 良いことです！ – user1068352

私は選択肢がヒット領域increasing clickable area of a buttonを使用することで、トラブルこの方法を使用して、ラジオボタンの値を見つけることがありました。

出典

2016-12-06 02:15:02

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

答えて

関連する問題