JavaScriptでチェックボックスの値を配列変数に格納する方法

このQ&Aのポイント
  • ASPから吐き出された複数のチェックボックスをJavaScriptで参照または変数に格納したい場合、配列変数を使用する必要があります。
  • しかし、今回の場合、オブジェクトエラーが発生してしまいます。これはHTMLの要素名が正しく指定されていないためです。
  • チェックボックスの値をJavaScriptの配列変数に格納するためには、チェックボックスにNo.を付ける必要があります。
回答を見る
  • ベストアンサー

チェックボックスの値を変数に (checkbox)

ASP から以下のようなタグを吐き出させページに複数個 表示させました。 <FORM name = "mail_to_win"> <INPUT type="checkbox" name="mail[1]" value="A" > <INPUT type="checkbox" name="mail[2]" value="B" > <INPUT type="checkbox" name="mail[3]" value="C" >  ・  ・  ・ これを、JavaScript で参照、または変数に格納したいと 思います。 そこで以下のように書いたのですが、 alert(document.mail_to_win.mail[1].defaultValue); a = document.mail_to_win.mail[1].defaultValue; 「エラー'document.mail_to_win.mail'はオブジェクト ではありません。」 というエラーが出てしまいます。 実は配列に取り込みたいので、大量のチェックボックス にNo.をつける必要があります。 チェックボックスの値をJavaScriptの配列変数に 格納するにはどうしたらいいのでしょうか。

  • yasu
  • お礼率79% (173/218)

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

  • ベストアンサー
  • kokucho81
  • ベストアンサー率61% (157/255)
回答No.1

<FORM name = "mail_to_win"> <INPUT type="checkbox" name="n1" value="A" > <INPUT type="checkbox" name="n2" value="B" > <INPUT type="checkbox" name="n3" value="C" > </FORM> 「名前自体が配列」なのは特に利点がないですね。 普通に連番号つき名前にしましょう。 以下のようなサンプルがあれば、各valueを配列に格納するのは簡単ですね。 <SCRIPT LANGUAGE="JavaScript"><!-- for(i=1; i<=3; i++) { alert(eval("document.mail_to_win.n"+i+".value")); } //--></SCRIPT> 後はご自分で。あなたの知識と能力があれば問題ないことでしょう。 (うぅ、しかし久々に書きこんじまったぃ。。。)

yasu
質問者

お礼

ありがとうございました!!! 上手いやり方だと思います。 ところで、あれからいろいろやってみたのですが、 全部同じ名前でも構わないみたいです。 つまり、 <INPUT type="checkbox" name="mail" value="A" > <INPUT type="checkbox" name="mail" value="B" > <INPUT type="checkbox" name="mail" value="C" > と全部同じ名前で、チェックボックスを作っておいて、 参照側で、 tmp(i) = document.mail_to_win.mail(i).Value と、ループで回してやれば、配列に取り込めことを 確認しました。 なんにせよ、いろいろあるもんだな、と素人ながら経験に なりました。 また何かありましたらよろしくお願いします。

関連するQ&A

  • チェックボックスの値を取り出したい

    こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ?マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが... 3つチェックされていてOKをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value    ? var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="OK" > </form> </html>

  • チェックボックスの値を(1,0)のようにすべて送信する方法

    formをsubmitすると、チェックボックスの値は、 チェックされた項目のvalue値が配列の形で送信されますよね。 たとえば、 <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="111" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="222" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="333" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="444"> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="555" CHECKED> だと、 [111,222,333,555] のように。 今回は、表形式でデータを表示し、 チェックされた行の、他の列の値(フィールド)も取得したいのです。 他の列のフィールドは、チェックされていない行でも入力されている可能性があります。 そうすると、そのフィールドの値も配列にして送ってしまうと、 チェックボックスの値と数が合わなくなり、横方向での関連付けが出来なくなってしまいます。 なので、チェックボックスの送信値を、配列の要素数は全件で、 チェックされたかされていないかということが分かるように することは不可能でしょうか? JavaScriptは規約により、使うことが出来ない状況で困っています(><) 何か案があれば教えてください。

    • ベストアンサー
    • HTML
  • チェックボックスのperlでの値の渡し方

    perlに限らず、CGIもJavascriptも初心者なのにHPでアンケートを作ろうとしている者です。機能はアンケートの末尾の「確認」を押すとCGIの“確認画面”が表示され、その後「送信」で記述内容がメール送信されるというものです。複数回答があるチェックボックスのperlでの値の渡し方を教えてください。症状として以下の様に記述した場合、AとCにチェックをすると「C」しか受け取れません。ちなみにチェックボックスに規定以上の数(例えば「最大2つまで回答可」みたいな)がチェックされたら瞬時にアラートが出るようにするJavascriptを使っていますので“name”は同一にしたいのですが。 ★CGIの記述 → $FORM{'test'} ★HTMLの記述↓ <INPUT type="checkbox" name="test" value="A">A <INPUT type="checkbox" name="test" value="B">B<INPUT type="checkbox" name="test" value="C">C 「配列変数」とやらが必要らしいのですが、どんな記述にすれば良いのかサッパリです。

    • ベストアンサー
    • Perl
  • チェックボックスの全選択

    <input type="checkbox" name="chk" value=1> <input type="checkbox" name="chk" value=2> <input type="checkbox" name="chk" value=3> <input type="checkbox" name="chk" value=4> <input type="checkbox" name="chk" value=5> このように同一名称のチェックボックスに対して ボタンを押下された時全てのチェックボックスを チェックするJavaScriptの 書き方を教えて貰えないでしょうか

  • javascriptでチェックボックスの選択状況をチェックする方法につ

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?

  • 複数のチェックボックス項目があり、そのチェック状態によって

    複数のチェックボックス項目があり、そのチェック状態によって 処理を分岐したいのですが、スマートなjavascriptの書き方が あれば教えてください! 【例】 <input type="checkbox" name="koumokuA" value="A1" /> <input type="checkbox" name="koumokuA" value="A2" /> <input type="checkbox" name="koumokuA" value="A3" /> <input type="checkbox" name="koumokuA" value="A4" /> <input type="checkbox" name="koumokuA" value="A5" /> <input type="checkbox" name="koumokuB" value="B1" /> <input type="checkbox" name="koumokuB" value="B2" /> <input type="checkbox" name="koumokuB" value="B3" /> <input type="checkbox" name="koumokuB" value="B4" /> <input type="checkbox" name="koumokuC" value="C1" /> <input type="checkbox" name="koumokuC" value="C2" /> <input type="checkbox" name="koumokuC" value="C3" /> <input type="checkbox" name="koumokuC" value="C4" /> もし【koumokuA】のA2とA3、【koumokuB】のB1とB4が選択された場合 同項目ではor条件、他項目ではand条件で処理したいので 考え方としては、 if(koumokuA=="A2" || koumokuA=="A3"){ if(koumokuB=="B1" || koumokuB=="B4"){ 実行内容 } } こんな感じなのですが、 実際にはチェックボックスの値は配列になるのでこのスクリプトでは動かない点と 効率よく複数のチェックボックスの選択結果を判定して、スクリプトを実行する 組み方があればご教授ください。 実行結果は、データが格納された配列の中から、選択項目に対応したデータを 表示するようにしたいのです。 よろしくお願いします。

  • 特定のチェックボックスをチェックするには

    特定のチェックボックス「白」を CHECKEDにする方法を教えて下さい。 #数と位置が変動するので配列は取得できません。 #「もしもcolorの値が白なら CHECKED」のような関数にしたい。 <INPUT TYPE="CHECKBOX" NAME="color" VALUE="おまかせ"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="白"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="ピンク"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="緑">

  • チェックボックスの戻り

    チェックボックスのvalue値に数字を入れてPOSTしています。 DB登録の前にその値を足し算してDBに登録しています。 <input type="checkbox" name="cb[0]" value="1"> <input type="checkbox" name="cb[1]" value="2"> <input type="checkbox" name="cb[2]" value="4"> <input type="checkbox" name="cb[3]" value="8"> <input type="checkbox" name="cb[4]" value="16"> ・・・のようにしています。DBの値を読み取ってcheckedを付ける際はどのようにしたら効率よく処理できるでしょうか?switchを使うとすごくチェックボックスの数が増えると厄介です。困っています。教えてください。

    • ベストアンサー
    • PHP
  • 複数のチェックボックスの値を、ひとつの変数に入れて表示したい。

    Perlで質問です。 下記のようなフォームで、A~Fまでのチェックボックスを選んで「test.cgi」にデータを送ります。 <HTML> <BODY> <FORM action="test.cgi"> <input name="q6_1" type="checkbox" value="A">A<br> <input name="q6_2" type="checkbox" value="B">B<br> <input name="q6_3" type="checkbox" value="C">C<br> <input name="q6_4" type="checkbox" value="D">D<br> <input name="q6_5" type="checkbox" value="E">E<br> <input name="q6_6" type="checkbox" value="F">F<br> <input name="q6_7" type="checkbox" value="G">G<br> <INPUT type="submit"> </FORM> </BODY> </HTML> 次の画面で、選ばれた物の確認画面を変数「$work6」を呼び出して表示したいと思っています。 <HTML> <BODY> A / B / C / D / E / F </BODY> </HTML> この処理をperlを使ってやりたいのですが、どうやったらいいのかわかりません。 for を使って「q6_1~7」を呼び出し、それぞれの最後に「 / 」を追加したあとファイルハンドルを使って、変数「$work6」に追加上書きして表示、と言うことをすれば良いのだろうと、下記のソースを書いて見ましたが、うまくいきませんでした。 (たぶん間違いだらけだと思いますが…。) open(IN, ">>$work6"); for ($q6 = 1; $q6 < 7; $q6++){ if ($FORM{'q6_$q6'} ne '') { print IN "$FORM{'q6_$q6'}." / ""; } } close(IN); つたない質問だと思いますが、 よろしくお願いします。

    • ベストアンサー
    • Perl
  • チェックボックスをクリックした際、自動的に他の値も

    ■チェックボックスをクリックした際、自動的に他の値も追加したい 下記のようなチェックボックスがあった際に、 <input type="checkbox" name="hoge[]" value="1" />ホゲ  <input type="checkbox" name="piyo[]" value="1" />ピヨ  <input type="checkbox" name="puyo[]" value="1" />プヨ  ホゲをクリックしたら、value="1"になるかと思うのですが、 このvalue部分を動的に生成することはできるでしょうか? 例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、 自動的に、 <input type="checkbox" name="hoge[]" value="1" /> <input type="checkbox" name="hoge[]" value="2" /> <input type="checkbox" name="hoge[]" value="3" /> <input type="checkbox" name="hoge[]" value="4" /> <input type="checkbox" name="hoge[]" value="5" /> <input type="checkbox" name="hoge[]" value="6" /> <input type="checkbox" name="hoge[]" value="7" /> <input type="checkbox" name="hoge[]" value="8" /> <input type="checkbox" name="hoge[]" value="9" /> をクリックしたのと同じ処理が走るよう、スクリプトで書くには、 どうすればよいでしょうか?

専門家に質問してみよう