ど素人から毛を生やす。<延>

選択した方・しない方、両方がlabelごと変化するラジオボタン

Web > javascript 2015年12月11日(最終更新:1年前)

このページは2015.12.11に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
長大なアンケートフォームを作ることになってしまいました。

できるだけ、入力者に負担をかけないフォームにするには、
とにかく文字数を少なくしたり、選択したものが明らかになったりする工夫が必要です。

h271211

選択したものを太字に、しないものを薄くしてみました。
これを応用すると、

h271211-2

こういう多肢選択式(評定)アンケートも可能です。

実現するjQueryがこちら。

$(document).ready(function(){

var radioNow = "" ;

$( 'input[type="radio"]' ).change( function() {
	radioNow = $(this).parent("label");
	$(radioNow).siblings("label").css({"color":"#ddd","font-weight":"nomal"});
	$(radioNow).css({"color":"#4d9a6e","font-weight":"bold"});
});

});

けっこうシンプルです。
ラジオボタンがチェックされたとき、親要素のラベルを取得。
その親要素の兄弟要素のcssと、自身のcssをそれぞれ変更させる感じです。

評定アンケートのときは、予めラジオボタンをdisplay:none;にしておくことで、よりスッキリしたフォームにできます。

 

なお、これだけではブラウザバックしたときに変更した色が戻ってしまうので、実際に使うならこんな感じになると思います。
2回同じcss処理を書くことになるので、cssを書くよりクラスを付け外しした方が管理が楽そうですね。

$(document).ready(function(){

var radioNow = "" ;

$( 'input[type="radio"]' ).change( function() {
	radioNow = $(this).parent("label");
	$(radioNow).siblings("label").css({"color":"#ddd","font-weight":"nomal"});
	$(radioNow).css({"color":"#4d9a6e","font-weight":"bold"});
});

$( 'input[type="radio"]' ).filter(":checked").map( function() {
	radioNow = $(this).parent("label");
	$(radioNow).siblings("label").css({"color":"#ddd","font-weight":"nomal"});
	$(radioNow).css({"color":"#4d9a6e","font-weight":"bold"});
});

});
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)