【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

本当にちょっとした jQuery のスクリプトなのですが、意外と使えそうなのでポストしてみます。

概要はタイトルにもある通り、ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するというものです。

スクリプトたち

イメージ

HTML

[html]

[/html]

ラジオボタンの checked はスクリプトの仕様上、必須です。

CSS

[css]

[/css]

JS

では、切り替えるスクリプト。

[js]

[/js]

説明

まず最初に removeClassで表示させます。ラジオボタンに checked がない場合は、TRが3つ、普通に表示されてしまうので注意。
で、次にラジオボタンの値によりしかるべし TR に invisible クラスを与えるだけです。
テーブルでなく、DIV タグにしたい場合は、テーブルタグではなく div で書き、セレクタを tr の内容ではなく、div　にしてしまえば、ほぼそのまま流用可能。

(1)の trigger は、画面の初期表示時にイベントを自動実行させるためのものです。
この場合は、チェーンメソッドにして、change 自身を実行させています。便利。

デモ

-Javascript,jQuery
-change(), jquery, js, radio, テキスト切り替え, ラジオボタン, 内容切り替え