id:kanienoteiou
ポイントあり200ptベストアンサーあり
インターネットウェブ制作

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でこれを実現する方法をご教授ください。

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2012/01/26 05:10:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:windofjuly No.2

回答回数2625ベストアンサー獲得回数1149

ポイント100pt

指定されたチェックボックスを集計しつつ、
それらチェックボックスを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="" にしたい場合は・・・今のところ見当もつかない状態です

id:kanienoteiou

後者のものが助かりました。ありがとうございます！

2012/01/26 15:27:01

その他の回答（1件）

id:rikuba No.1

回答回数26ベストアンサー獲得回数12

ポイント100pt

それらのチェックボックスは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パラメータを使えます）。

id:kanienoteiou

ありがとうございます！おかげさまで解決できました。

2012/01/26 15:26:33
id:windofjuly No.2

回答回数2625ベストアンサー獲得回数1149ここでベストアンサー

ポイント100pt

指定されたチェックボックスを集計しつつ、
それらチェックボックスを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="" にしたい場合は・・・今のところ見当もつかない状態です

id:kanienoteiou

後者のものが助かりました。ありがとうございます！

2012/01/26 15:27:01

コメント（2件)

  • id:Cherenkov
    Cherenkov 2012/01/19 06:19:22
    getを送るタイミングはチェックボックスをクリックした瞬間？submitボタンを押した時？jQuery使ってもいい？
  • id:kanienoteiou
    kanienoteiou 2012/01/26 15:29:29
    解決しました。
    いちおう、サブミットボタンを押したときで、Jqueryを使用してもＯＫで考えておりました。
    お返事が遅くなってすみません。
    ありがとうございました！

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ