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>
トライした結果、うまくいっていなくても結構ですのでやってみたこととしてソースコードをご提示ください。また、htmlもご提示ください。
「綺麗にしたい」ということはそこそこのコード量があるものと推察されます。その場合はなるべくコード全体を提示しないとリファクタリングしようがありません。
HTMLは変更してもよいのでしょうか? それともjavascriptだけで対応するのですか?
HTML提示ありがとうございます。チェックボックスではなくラジオボタンになっているようですが。
出来ればjavascriptだけが希望です。そう仰られるという事は、HTMLを変更すると、よりスマートなjavascriptになるという事でしょうか?両方・・・というのは虫が良すぎるでしょうか。。。すみません。出来ればはやりjavascriptだけでお願いしたいです。
html変更する場合もclassをつけるとかになりますが、ラジオボタンであればそれも必要なさそうに思います。
classを追加されるだけでしたら大丈夫です。'sim1'を'sim01'に変更するなどだと困るなと考えておりました。
回答2件
あなたの回答
tips
プレビュー