はじめに

会社で答えなきゃいけないアンケートがあったんですが、アンケートシステムがレガシーだったんですね。質問に回答するのにマウスの正確な操作を求められて、いらいらMaxでした。

ということで、レガシーなシステムのラジオボタンを勝手に改善します。

困っていること

ラジオボタンにラベル属性が付いてなく、ラジオの○の部分だけが押せる状態だった。4択アンケートに50問くらい回答しないといけないのに、ミリ単位でマウスを絶妙に合わせる作業をする必要があった。

改善してみる

JavaScriptを書いてこの状況を改善します。
たった10行でラジオボタンを押しやすくなりました。

私の困っていたサイトでは、ラジオボタンの上位タグがtdだったためtdにイベントを差し込みました。元のHTMLの構造に左右されるのでHTMLの構造をハックしたうえで適切にスクリプトを書き換えてお使いください。

レガシーなHTMLのサンプルがないと試せないので、あえて作ってここに置いときました。ご自由にお使いください。

コード

コードはたった10行です。
Chrome DevToolのコンソールにスクリプトを貼り付けるだけで動きます。準備や予備知識は必要ないですね。

頑張ればもっと短く書けると思います。マウスオーバーで色を付ける必要もなければ2行短くなります。

radio.js

for( const r of document.querySelectorAll('input[type="radio"]') ){
  //ここはparentでいいのかはHTMLの構造による。parentNode.parentNodeのほうがいいこともある。
  const td = r.parentNode;
  
  td.addEventListener('click', function(){ r.click(); });
  td.addEventListener('mouseover',function(){td.style.backgroundColor='#5F6F94'});
  td.addEventListener('mouseleave',function(){td.style.backgroundColor='#FFFFFF'});
}

やってることは、これだけです。

ドキュメント全体から、<input type="radio">を探し
radioの一つ上の親要素のonclickにイベントに、radioのクリックを設定する
mouseoverイベントとmouseleaveイベントに色を設定する

システム提供側が考慮するのが前提

昔のサービスやシステムだとラジオボタンやチェックボックスのユーザ側の操作性を考慮していない場合が多いです。作るときにちゃんと考慮してくれれば、こんなスクリプトの出番はありません。

押しやすいラジオの書き方

<!-- IDとラベルとforを付けるんだ -->
<input type="radio" name="radio1" value="1" id="radio1"><label for="radio1">はい</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for="radio2">いいえ</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for="radio3">どちらでもない</label>

こっちのほうがシンプルですね。thanks @rl5j3

押しやすいラジオの書き方（その２）

<!-- ラベルで囲むんだ -->
<label><input type="radio" name="radio1" value="1">はい</label>
<label><input type="radio" name="radio1" value="2">いいえ</label>
<label><input type="radio" name="radio1" value="3">どちらでもない</label>

ラジオとチェックボックスを〇と□をマウスで直撃させるのはやめましょう。