ベストアンサー

チェックボックスの取得数値で別のチェックボックスを選択可能に

2009/12/10 18:22

こんにちは、初めて利用させていただきます。 Javascriptを利用し、下記URLのようなものを作成中です。 http://mag.morirepo.com/test_skill.html それぞれのテーブルごとに段階を設け、「次の段階に進むためには2ポイント以上消費しなければチェックボックスが表示されない」といったものにしたいのですが、上手くスクリプト書けませんでした。 FirefoxとIEで動作させたいと思っています。よろしくお願いします。

HIEN_jpn
お礼率50% (1/2)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/12/10 20:42 回答No.2

（1）ご提示のソースの構成という条件で、<table>内の<input>要素は全て　　チェックボックスであると仮定し、そのチェックは省略しています。（2）同じ段階の項目はinputのname属性が同じであるということを利用して　　　　判定しています。　（なので、ご提示の「至近距離技能」のところは　　正しく動作しません。＝全部同じnameになっている）（3）ソースの「onClick="ttlValue()"」と「disabled」の設定は繰り返しが　　多いので、省略できるようにしました。　　下のサンプルのようにすることが可能です。　　（formに代表してonclickを設定しています。）　　（オンロード時に、非表示とdisabledをセットするようにしています）（4）非表示にしてかつdisabledにするのかどうか不明でしたので（非表示　　だけでもことたりるのか）、一応、disabledにもにしていますが、不要　　ならばはずしてください。　　また、非表示にした時にチェックされている内容をクリアするのか　　どうかも不明でしたので、チェックはそのままです。クリアしたい　　場合は、コメントアウトしてある部分を有効にしてください。（5）クリックされたらttlValue()が続いて実行されるようになっていますが、　　ttlValue()でやりたいことが良くわからなかったので、とりあえずダミー　　のfunctionになっています。 function ttlValue()　を置き換えれば　　そのまま機能するはずです。　　最後の<select>の「onChange="ttlValue()"」は省略できませんので、　　そのまま残しておいてください。以下、サンプルです。（短くするため、2項目のみに減らしてあります。） <html> <head> <script type="text/javascript"> window.onload = function() { var i, p = document.getElementById('tableBox').getElementsByTagName('TABLE'); for (i=0; i<p.length; i++) check(p[i]); } function test(evt) { var t = evt.target || evt.srcElement; if (t.nodeName != 'INPUT' || t.type != 'checkbox') return; var p = t.parentNode; while (p.nodeName != 'TABLE') p = p.parentNode; check(p); ttlValue(); } function check(p) { var n, c, i = 0, e = p.getElementsByTagName('INPUT'); while (e[i]) { n = e[i].name; c = 0; while (e[i] && e[i].name == n) { if (e[i].checked) c += parseInt(e[i].value); e[i].disabled = false; e[i++].style.visibility = 'visible'; } if (c<2) while (e[i]) { //e[i].checked = false; //一度消えたらチェックも消す場合 e[i].disabled = true; e[i++].style.visibility = 'hidden'; } } } function ttlValue() { return; }　//←省略しています </script> </head> <body> <form name="skillForm" onclick="test(event)"> <div id="tableBox"> <p>( )内の数値は必要ポイントです。</p> <h3>防御技能</h3> <table cellspacing="0"> <tr> <td colspan="2" class="top left dankai">第1段階</td> <td colspan="2" class="top dankai">第2段階</td> <td colspan="2" class="top dankai">第3段階</td> <td class="top dankai">第4段階</td> </tr> <tr> <td class="left noLineUnder green">HGリロードタイム</td> <td class="noLineUnder green">切替速度</td> <td class="noLineUnder yellow2">PDW</td> <td class="noLineUnder green">連射タイム</td> <td class="noLineUnder yellow1">サイレンサー</td> <td class="noLineUnder green">振る速度向上</td> <td class="noLineUnder green">リーチ拡張</td> </tr> <tr> <td class="left chBox green"><i>(1)</i> <input name="bx2Lv1" type="checkbox" value="1" /></td> <td class="chBox green"><i>(1)</i> <input name="bx2Lv1" type="checkbox" value="1" /></td> <td class="chBox yellow2"><i>(3)</i> <input name="bx2Lv2" type="checkbox" value="3" /></td> <td class="chBox green"><i>(2)</i> <input name="bx2Lv2" type="checkbox" value="2" /></td> <td class="chBox yellow1"><i>(2)</i> <input name="bx2Lv3" type="checkbox" value="2" /></td> <td class="chBox green"><i>(2)</i> <input name="bx2Lv3" type="checkbox" value="2" /></td> <td class="chBox green"><i>(2)</i> <input name="bx2Lv4" type="checkbox" value="2" /></td> </tr> </table> <h3>身体技能</h3> <table cellspacing="0"> <tr> <td colspan="3" class="top left dankai">第1段階</td> <td colspan="3" class="top dankai">第2段階</td> <td colspan="2" class="top dankai">第3段階</td> <td class="top dankai">第4段階</td> </tr> <tr> <td class="left noLineUnder green">衝突抵抗度</td> <td class="noLineUnder green">探知力向上</td> <td class="noLineUnder green">ダッシュ回復力増加</td> <td class="noLineUnder green">上級空挺部隊</td> <td class="noLineUnder green">隠密性向上</td> <td class="noLineUnder green">持久力増加</td> <td class="noLineUnder green">科学攻撃抵抗度</td> <td class="noLineUnder green">爆発への抵抗</td> <td class="noLineUnder green">体力増加</td> </tr> <tr> <td class="left chBox green"><i>(1)</i> <input name="bx3Lv1" type="checkbox" value="1" /></td> <td class="chBox green"><i>(1)</i> <input name="bx3Lv1" type="checkbox" value="1" /></td> <td class="chBox green"><i>(1)</i> <input name="bx3Lv1" type="checkbox" value="1" /></td> <td class="chBox green"><i>(2)</i> <input name="bx3Lv2" type="checkbox" value="2" /></td> <td class="chBox green"><i>(2)</i> <input name="bx3Lv2" type="checkbox" value="2" /></td> <td class="chBox green"><i>(2)</i> <input name="bx3Lv2" type="checkbox" value="2" /></td> <td class="chBox green"><i>(4)</i> <input name="bx3Lv3" type="checkbox" value="4" /></td> <td class="chBox green"><i>(4)</i> <input name="bx3Lv3" type="checkbox" value="4" /></td> <td class="chBox green"><i>(5)</i> <input name="bx3Lv4" type="checkbox" value="5" /></td> </tr> </table> </div> <div id="LvPt"> Lv.<select name="ch2" onChange="ttlValue()"> <option value="1" selected>1</option> <option value="2">2</option>  </select> 残り<INPUT name="result" type="text" value="1" size="3" id="result" /> pt </div> </form> </body> </html>

質問者