参考にしたのは下のリンク先の情報
上記のサイトではtableタグを使っていたので、それをDIVタグに変更。ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた
トップページ > WEB製作 > ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた 久々にjQueryネタでも。 本当にちょっとしたものなのですが、意外と使えそうなのでポストしてみます。 概要はタイトルにもある通り、ラジオボタンの選択値によって、指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するというものです。 ラジオボタンの checked はスクリプトの仕様上、必須です。 では、切り替えるスクリプト。 まず最初に removeClassで表示させます。ラジオボタンに checked がない場合は、TRが3つ、普通に表示されてしまうので注意。 で、次にラジオボタンの値によりしかるべし TR に invisible クラスを与えるだけです。 テーブルでなく、DIV タグにしたい場合は、テーブルタグではなく div で書き、セレクタを tr の内容ではなく、div にしてしまえば、ほぼそのまま流用可能。 (1)の trigger は、画面の初期表示時にイベントを自動実行させるためのものです。 この場合は、チェーンメソッドにして、change 自身を実行させています。便利。
あと項目が３つだけだったので１０個増やして全部で１３個のメニューから呼び出せるようにしました。
CSS周りは全然いじっていませんけど、デフォルトではクラス名「.invisible」が必須でほかは自由にデザインできるので適当に変更しちゃってください。
とりあえず全体のソース。
あ、jQueryはバージョン1.xじゃないと動きませんのでそのへんは注意してくださいね。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryを使ったラジオボタンでタブメニュー切り替え</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio]').change(function() {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').removeClass('invisible');
if ($("input:radio[name='tabmenu1']:checked").val() == "1") {
$('#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "2") {
$('#tr1,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "3") {
$('#tr1,#tr2,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "4") {
$('#tr1,#tr2,#tr3,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "5") {
$('#tr1,#tr2,#tr3,#tr4,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "6") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "7") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "8") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "9") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "10") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "11") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "12") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "13") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12').addClass('invisible');
}
}).trigger('change'); //←(1)
});
</script>
<style>
.invisible {
display: none;
}
</style>
</head>
<body>
<div>
<label >
<input type="radio" name="tabmenu1" value="1" id="radio1" checked />
NO1</label>
</div>
<div>
<label for="radio2">
<input type="radio" name="tabmenu1" value="2" id="radio2"/>
NO2</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="3" id="radio3" />
NO3</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="4" id="radio4" />
NO4</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="5" id="radio5" />
NO5</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="6" id="radio6" />
NO6</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="7" id="radio7" />
NO7</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="8" id="radio8" />
NO8</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="9" id="radio9" />
NO9</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="10" id="radio10" />
NO10</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="11" id="radio11" />
NO11</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="12" id="radio12" />
NO12</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="13" id="radio13" />
NO13</label>
</div>
<div id="tr1">
<h5>機能</h5>
<p>1</p>
</div>
<div>
<div id="tr2">
<h5>機能</h5>
<p>2</p>
</div>
<div id="tr3">
<h5>機能</h5>
<p>3</p>
</div>
<div id="tr4">
<h5>機能</h5>
<p>4</p>
</div>
<div id="tr5">
<h5>機能</h5>
<p>5</p>
</div>
<div id="tr6">
<h5>機能</h5>
<p>6</p>
</div>
<div id="tr7">
<h5>機能</h5>
<p>7</p>
</div>
<div id="tr8">
<h5>機能</h5>
<p>8</p>
</div>
<div id="tr9">
<h5>機能</h5>
<p>9</p>
</div>
<div id="tr10">
<h5>機能</h5>
<p>10</p>
</div>
<div id="tr11">
<h5>機能</h5>
<p>11</p>
</div>
<div id="tr12">
<h5>機能</h5>
<p>12</p>
</div>
<div id="tr13">
<h5>機能</h5>
<p>13</p>
</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿