どもです。
長大なアンケートフォームを作ることになってしまいました。
できるだけ、入力者に負担をかけないフォームにするには、
とにかく文字数を少なくしたり、選択したものが明らかになったりする工夫が必要です。
選択したものを太字に、しないものを薄くしてみました。
これを応用すると、
こういう多肢選択式（評定）アンケートも可能です。
実現する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"});
});
});