人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptの質問です。複数のチェックボックスを選択した際に配列として扱わず、特定のValueを返すように出来ないでしょうか?
例えば、
<INPUT TYPE="checkbox" NAME="cb" VALUE=""> 1
<INPUT TYPE="checkbox" NAME="cb" VALUE=""> 2

となっていたとき、
1をチェックしたら、value=1が。
2をチェックしたら、valur=2が。
1と2両方をチェックしたら、value=3がサーバーに渡るようにしたいのです。
Javascriptでこれを実現する方法をご教授ください。

●質問者: kanienoteiou
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● rikuba
●100ポイント

それらのチェックボックスはform要素の一部で、そのform要素を送信するときに合計値を算出しておきたいということでしょうか。

<form action="foo.php" method="GET" onsubmit="doSubmit.call(this, event);">
 <label><input type="checkbox" name="cb" value="1"> 1</label>
 <label><input type="checkbox" name="cb" value="2"> 2</label>
 <input type="hidden" name="value">
 <input type="submit" value="送信">
</form>

<script type="text/javascript">
function doSubmit(event) {
 var nodes = this.elements['cb'], node, i = 0, value = 0;
 while ((node = nodes[i++])) {
 if (node.checked) {
 value += Number(node.value);
 }
 }
 this.elements['value'].value = value;
}
</script>

事前に隠しコントロール(type="hidden")を用意しておき、送信前にチェックされた分の合計値を算出し、隠しコントロールに入れています。

これによりサーバ側のプログラムからはvalueパラメータとしてチェックされた分の合計値を得られます(ユーザがJavaScriptを有効にしていなかった場合を考慮する場合はcbパラメータを使えます)。


kanienoteiouさんのコメント
ありがとうございます!おかげさまで解決できました。

2 ● うぃんど
●100ポイント ベストアンサー

指定されたチェックボックスを集計しつつ、
それらチェックボックスをdisable=true(=送信しない)にして、
最後のひとつに集計結果を代入するとともに、
最後のひとつだけをdisable=falseに戻すという手を考えてみました

<html>
<head>
 <script type="text/javascript">
 <!--
 function s1(formObj,nodeName) {
 var nodeLength = formObj.length;
 var s = 0;
 var leaveBox = formObj[0];
 for (var i = 0; i < nodeLength; i++) {
 if (formObj[i].name == nodeName && formObj[i].checked) {
 formObj[i].disabled = true;
 s += formObj[i].value * 1;
 leaveBox = formObj[i];
 }
 }
 leaveBox.value = s;
 leaveBox.disabled = false;
 formObj.submit();
 }
 //-->
 </script>
</head>
<body>
 <h2>s1テスト用フォーム</h2>
 <form action="a" method="GET">
 <input type="checkbox" name="cb" value="1" />1<br />
 <input type="checkbox" name="cb" value="2" />2<br />
 <input type="button" value="送信" onclick="javasctipt:s1(this.parentNode,'cb')" />
 </form>
</body>
</html>

チェックボックスのvalueを書き換えてしまうのではなく、
専用のチェックボックスを末尾に非表示で用意しておく例も併記して置きます
(内容をチェックしてから送信したいという用途向けです)

<html>
<head>
 <script type="text/javascript">
 <!--
 function s2(formObj,nodeName) {
 var nodeLength = formObj.length;
 var s = 0;
 var leaveBox = formObj[0];
 for (var i = 0; i < nodeLength; i++) {
 if (formObj[i].name == nodeName && formObj[i].checked) {
 formObj[i].disabled = true;
 s += formObj[i].value * 1;
 leaveBox = formObj[i];
 }
 }
 leaveBox.value = s;
 leaveBox.disabled = false;
 formObj.submit();
 }
 //-->
 </script>
</head>
<body>
 <h2>s2テスト用フォーム</h2>
 <form action="a" method="GET">
 <input type="checkbox" name="cb" value="1" />1<br />
 <input type="checkbox" name="cb" value="2" />2<br />
 <input type="checkbox" name="cb" value="" style="display:none;"/>
 <input type="button" value="送信" onclick="javasctipt:s2(this.parentNode,'cb')" />
 </form>
</body>
</html>

VALUE="" にしたい場合は・・・今のところ見当もつかない状態です


kanienoteiouさんのコメント
後者のものが助かりました。ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ