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回まで
  • 13歳以上
  • 登録:2012/01/19 05:06:34
  • 終了:2012/01/26 05:10:03

ベストアンサー

id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492012/01/19 06:46:48

ポイント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

rikuba回答回数26ベストアンサー獲得回数122012/01/19 06:24:51

ポイント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ベストアンサー獲得回数11492012/01/19 06:46:48ここでベストアンサー

ポイント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
  • id:Cherenkov
    getを送るタイミングはチェックボックスをクリックした瞬間?submitボタンを押した時?jQuery使ってもいい?
  • id:kanienoteiou
    解決しました。
    いちおう、サブミットボタンを押したときで、Jqueryを使用してもOKで考えておりました。
    お返事が遅くなってすみません。
    ありがとうございました!

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません