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

解決済

質問者：HIEN_jpn
質問日時：2009/12/10 18:22
回答数：2件

こんにちは、初めて利用させていただきます。

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

FirefoxとIEで動作させたいと思っています。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/12/10 20:42

（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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
ここまで書いていただけるとは思いませんでした。というか、間違いの指摘や、クリアしたい時の場合まで解説＋追加していただき感激です。

自分が思っていたよりもだいぶ難しいスクリプトだったのがわかりました。
こんな綺麗なものが書けるように頑張りたいと思います。

ありがとうございました。

通報する

お礼日時：2009/12/10 20:55

No.1

回答者： yambejp
回答日時：2009/12/10 19:36

基本はcheckboxを押すたびに再計算するってことだとおもいます。

ルールがよくわからなかったので、もう少し簡便な例示がよいかと

この回答への補足

すみません、余計なものが多かったようですね。
どんな形で使いたいのかすべて見せたほうがわかりやすいかと思ったのですが。

簡略化したものをあげなおしました。
もとの形のものは下記にあります。よろしくお願いします。
http://mag.morirepo.com/test_skill_full.html

補足日時：2009/12/10 20:46

通報する