Eyecatch jQuery

Javascript,jQuery

ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた

2015/06/02

久々にjQueryネタでも。
本当にちょっとしたものなのですが、意外と使えそうなのでポストしてみます。
概要はタイトルにもある通り、ラジオボタンの選択値によって、指定したテーブルのTRタグ(無論DIVでも)の表示・非表示を変更し、内容を操作するというものです。

スクリプトたち

イメージ

20150602_radio_bg_01

20150602_radio_bg_02

20150602_radio_bg_03

HTML

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

CSS

JS

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

説明

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

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

デモ

デモはこちらから


-Javascript,jQuery
-, , , ,