出てるところでは散々既出でしょうけど、JavaScript小ネタをば。
ラジオボタンは、デスクトップOSのGUIでもHTMLでも一般的な選択ウィジェットです。しかし、Webの上で使われるHTMLフォームのそれには、やや不便な点があります。それは文字ラベル部分をクリックして選択することができない点です。
先日、とある制作業務の中でこの不満をなんとかしてやろうと思い立って、以下の方法を編み出した(?)でご紹介します。
下の例を触ってみて下さい。一般的なINPUTタグの書き方だと、文字の部分をクリックしても何も起こりません。
これに、以下のようにJavaScriptを書き加えると、
<form name=”sample2″>
Q.私にとってメイドさんのいる生活は、
<ul style=”list-style-type:none;”>
<li onClick=”document.sample2.radio2[0].click();”><input type=”radio” name=”radio2″>A. 人生の目標です。</li>
<li onClick=”document.sample2.radio2[1].click();”><input type=”radio” name=”radio2″>B. 人生の目的です。</li>
</ul>
</form>
Q.私にとってメイドさんのいる生活は、
<ul style=”list-style-type:none;”>
<li onClick=”document.sample2.radio2[0].click();”><input type=”radio” name=”radio2″>A. 人生の目標です。</li>
<li onClick=”document.sample2.radio2[1].click();”><input type=”radio” name=”radio2″>B. 人生の目的です。</li>
</ul>
</form>
すると、ほぅら、
Windows上のアプリと同じように、ラベルをクリックできるようになりました。クリック反応エリアが広がるので、ユーザが項目を選択するのがグンと楽になります。
UL＆LIタグを使わない場合は、文字ラベル部分をSPANタグあたりで括って、そこに書けば良いでしょう。ポイントは、同一のnameがついているラジオボタンを、[0]、[1]のように呼び分ける点ですね。
そういえば、最近いつのまにかGoogleが対応したみたいですね。ソース読んでないので、どういう方法で実装したのか不明ですが。きっとブラウザ汎用性とか研究しつくした上での実装だろうから、このやり方よりも洗練されてる予感。まぁ、実装方法はどうあれ、広まっていって欲しいですね。
ロックマンさんより、JavaScriptを使わなくてもLABELタグで同じことを実現する方法をご指摘いただきました。コメント欄もお読み下さい。
初めまして。いつもためになる情報をありがとうございます。
HTMLで実現させる方法として以下のような書き方もあります。
Q.私にとってメイドさんのいる生活は、
A. 人生の目標です。
B. 人生の目的です。
すみません、タグ部分を>や<とかで書き直したのですが巧くいきませんでしたので全角で再送します。
HTMLで実現させる方法として以下のような書き方もあります。
＜form name=“sample3“＞
＜p＞Q.私にとってメイドさんのいる生活は、＜/p＞
＜ul style=“list-style-type:none;“＞
＜li＞＜label for=“A1“＞＜input type=“radio“ name=“radio2“ id=“A1“ value=“A.“＞A. 人生の目標です。＜/label＞＜/li＞
＜li＞＜label for=“A2“＞＜input type=“radio“ name=“radio2“ id=“A2“ value=“B.“＞B. 人生の目的です。＜/label＞＜/li＞
＜/ul＞
＜/form＞
こんにちは。はじめまして。
＃すみません、コメント欄はセキュリティ上の理由でタグが無効になってるんです。
ナント、JavaScript使わなくてもできるんですね。お恥ずかしい。
調べてみるとIE4以降とNN6以降対応ですので、実質問題無さそうですね（万一動作しなくてもさほど弊害がない内容ですし）。
今調べたらGoogleもLABELタグを使ってました。
というワケで、教えていただいたLABELタグの方を使う方が良いと思われます。＞All
情報ありがとうございました。＞ロックマンさん