Posted by & filed under JavaScript.

Zopeジャンキー日記 :ラジオボタンにはlabelタグのforが便利:

はてなブックマークの「注目エントリー」で、3ユーザと5ユーザの切替ボタンが、
ラベルと連動していないことに気づいた。

HTMLソースでいうと、いま

<input value=”3″ name=”threshold” type=”radio”>
3users
<input value=”5″ name=”threshold” type=”radio”>
5users

のようになっていますが(ちょっと簡略化しています)、

<input value=”3″ name=”threshold” type=”radio” id=”button1″ />
<label for=”button1″>3users</label>
<input value=”5″ name=”threshold” type=”radio” id=”button2″ />
<label for=”button2″>5users</label>

のようにすれば、ラベル部分もクリックできるようになります。

私はこの切替ボタンをよく押すので、
ラベルもクリックできるようになるとうれしいです>はてなの担当者様

じつは私も、わりと最近になって知ったクチなんですが(笑)、
これは知らないともったいないと思ったので、紹介しておきます。

アップデート (12/22):
コメント欄にて、ながさわさんより

<label><input value=”3″ name=”threshold” type=”radio” /> 3users</label>
<label><input value=”5″ name=”threshold” type=”radio” /> 5users</label>

と書けることを教えていただきました。
こんなのがあったとは! このほうがダンゼン単純ですね。
ありがとうございます。

アップデート2 (12/22):
さらにコメント欄でのe-luckさんからの情報で、こちらの書き方はIEでは動作しないとのこと。
こちらのほうがシンプルなのに、残念ですね。

Comments are closed.