チェックボックス１～９のどれかが選択されたら#optionsをslideDownさせる。 きれいなjavascriptを書きたい。

Question

	if(	document.getElementById('sim1').checked){$('#options').slideDown();};
	if(	document.getElementById('sim2').checked){$('#options').slideDown();};
・・・・
	if(	document.getElementById('sim9').checked){$('#options').slideDown();};

を綺麗にしたいです。
for (i=0; i<9; i++) を使用してトライしてますがうまく行きません。
簡単なことだと思いますが、よくわかっていないため・・・
また、良い例も検索できずにおります。

ご教示ください。

やってみた事

function calc()
{
for (i=0; i<9; i++) if(	document.getElementById('sim' + i).checked){$('#options').slideDown();};
}

function calc()
{
for (i=0; i<9; i++){ if(	document.getElementById('sim' + i).checked){$('#options').slideDown();};};
}

function calc()
{
if(document.getElementById(for (i=0; i<9; i++) 'sim' + i).checked){$('#options').slideDown();};
}

function calc()
{
	if(	document.getElementById('sim1').checked){$('#options').slideDown();};
	if(	document.getElementById('sim2').checked){$('#options').slideDown();};
	if(	document.getElementById('sim3').checked){$('#options').slideDown();};
	if(	document.getElementById('sim4').checked){$('#options').slideDown();};
	if(	document.getElementById('sim5').checked){$('#options').slideDown();};
	if(	document.getElementById('sim6').checked){$('#options').slideDown();};
	if(	document.getElementById('sim7').checked){$('#options').slideDown();};
	if(	document.getElementById('sim8').checked){$('#options').slideDown();};
	if(	document.getElementById('sim9').checked){$('#options').slideDown();};
}

HTML

<table class="sim_tbl">
<thead>
<tr><th colspan="2">登録数(～件迄）</th><td>1,000</td><td>3,000</td><td>6,000</td><td>9,000</td><td>12,000</td><td>15,000</td><td>20,000</td><td>30,000</td><td>30,000</td></tr>
</thead>
<tbody>
<tr><th colspan="2">基本料金</th>
<td><input type="radio" name="num" value="3000" onClick="calc()" id="sim1"><label for="sim1">3,000円</label></td>
<td><input type="radio" name="num" value="5000" onClick="calc()" id="sim2"><label for="sim2">5,000円</label></td>
<td><input type="radio" name="num" value="8000" onClick="calc()" id="sim3"><label for="sim3">8,000円</label></td>
<td><input type="radio" name="num" value="12000" onClick="calc()" id="sim4"><label for="sim4">12,000円</label></td>
<td><input type="radio" name="num" value="15000" onClick="calc()" id="sim5"><label for="sim5">15,000円</label></td>
<td><input type="radio" name="num" value="18000" onClick="calc()" id="sim6"><label for="sim6">18,000円</label></td>
<td><input type="radio" name="num" value="20000" onClick="calc()" id="sim7"><label for="sim7">20,000円</label></td>
<td><input type="radio" name="num" value="25000" onClick="calc()" id="sim8"><label for="sim8">25,000円</label></td>
<td><input type="radio" name="num" value="60000" onClick="calc()" id="sim9"><label for="sim9">60,000円</label></td>
</tr>
</tbody>
</table>

<table class="sim_tbl" id="options">
<tbody>
<-略->
</tbody>
</table>

Comments

[m.ts10806]

トライした結果、うまくいっていなくても結構ですのでやってみたこととしてソースコードをご提示ください。また、htmlもご提示ください。

[m.ts10806]

「綺麗にしたい」ということはそこそこのコード量があるものと推察されます。その場合はなるべくコード全体を提示しないとリファクタリングしようがありません。

[Lhankor_Mhy]

HTMLは変更してもよいのでしょうか？ それともjavascriptだけで対応するのですか？

[m.ts10806]

HTML提示ありがとうございます。チェックボックスではなくラジオボタンになっているようですが。

[Samson818]

出来ればjavascriptだけが希望です。そう仰られるという事は、HTMLを変更すると、よりスマートなjavascriptになるという事でしょうか？両方・・・というのは虫が良すぎるでしょうか。。。すみません。出来ればはやりjavascriptだけでお願いしたいです。

[m.ts10806]

html変更する場合もclassをつけるとかになりますが、ラジオボタンであればそれも必要なさそうに思います。

[Samson818]

classを追加されるだけでしたら大丈夫です。'sim1'を'sim01'に変更するなどだと困るなと考えておりました。

Answer 1

簡単にやるならこう。

$(function(){
   $('input[name=num]').on('change',function(){
       $('#options').slideDown();
   })
})    

提示のhtmlがラジオボタンなのでこれでOKです。
もしチェックボックスなら少し工夫が必要です。

追記：
jQueryを使っているのであればjQueryで統一しましょう。

Answer 2

例えばですが、

$("[name=num]").on("click", function() {
  $("#options").slideDown();
});

みたいな感じでname(もしくはclassをラジオボタンに付ける)を指定して一括でクリックイベントを指定とかどうでしょうか

クリックされたラジオボタンは

$("[name=num]").on("click", function() {
  console.log(this);
});

みたいにfunction内のthisを使えばクリックされた要素が取れますので、クリックされたボタンのvalueも取れると思います。