jQueryを使って、ラジオボタンにあわせて画面の表示・非表示を変更する。

日曜日の朝。
つけっぱなしにしていたTVでONE-PIECEが流れていて、不覚にも10分で泣かされた。
ワンピってさ、たいていの登場人物に悲しい過去があって、それには悲しい別れとか、自己犠牲のエピソードがあったりして、ぜったい泣かすのよ。レベッカと片足の兵隊さん。かんべんして〜。 (>_<)

で、先週から三歩進んで二歩下がる状態だったRailsのプログラムが、だいたい希望していた動きをし始めた。
たった1画面だよ。
バカみたいな話。
何にも分かっていないやつが、Rails相手にコントローラーつくったり、Viewで悪戦苦闘したり、そしてどうしても必要だったので、jQueryまで触ったよ。実験段階ではうまく動作したので、これからカフェでランチを食べながら本格的に実装開始。

デザインが全くされていないので、まるでブルックの状態。
なんだけど、動くものを見ていると愛おしい気持ちにはなる。

で、jQueryの内容について簡単な備忘録を残す。
ラジオボタンがいくつかあって、そのラジオボタンの動作にしたがってテーブルの一部分が表示されたり、隠されたりする簡単なもの。

まずページ読み込みの際に、hogehogeというネームのラジオボタンのチェックをすべて外し、ノーチェック状態にする。そして、表示変更される全部をいったん隠す。全体に対して、この場合は「test3a」というクラスを設定しておく。こうすれば全体を一括して表示、隠しができる。

そして、表示要素にidを設定しておいて、ラジオボタンのクリックされた状況に応じて表示させたり、隠したりをする。表示要素はこれから増えるはずなので、クラス test3aを使って一括で隠し、そのあとidで必要なものを表示させる方が合理的なんだろう。

ちなみに。
jQuery(“.test3a”).hide();
jQuery(“#test2a”).hide();
上記の差は、.test3aがクラスが対象、#test2aはidが対象な点。

==========
jQuery(function(){
//ページ読み込み時に実行したい処理
    jQuery('input[name=“hogehoge”]’).attr("checked",false);
    jQuery(“.test3a”).hide();

//表示・非表示の切り替え
    jQuery(".test1").click(function(){
        jQuery(“#test1a”).show();
        jQuery(“#test2a”).hide();
    });
    jQuery(".test2").click(function(){
        jQuery(“#test1a”).hide();
        jQuery(“#test2a”).show();
    });
});
==========

Viewの一部
==========
<tr class="test3a" id="test1a">
<th><%= f.label :追加情報1 %></th>
<td>
テスト1
</td>
</tr>
<tr class="test3a" id="test2a">
<th><%= f.label :追加情報2 %></th>
<td>
テスト2
</td>
</tr>
==========