• ベストアンサー

javascriptで配列のような書き方をチェック

多くのラジオボタンを用いてページを作っています。 test1_1 test1_2 test1_3 ... test1_XX とnameが続き、さらに一つ一つにはvalueが0と1というように複数並んでいるとします。 任意のvalueの値Yを持つnameはいくつあるのか、 XXまでの全てにチェックが入っているのか、 この2点を調べるコードはどのように書けばよいのでしょうか。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

querySelectorAll を使える実装なら比較的簡単に書けます。 http://zng.info/specs/css3-selectors.html --- var form = document.forms[0]; // form要素 form.querySelectorAll('input[type="radio"][name^="test1_"][value="1"]'); // value="1" のradioボタン form.querySelectorAll('input[type="radio"][name^="test1_"]').length === form.querySelectorAll('input[type="radio"][name^="test1_"]:checked'); // 全てにチェックが入っているか ---

tailbeat
質問者

お礼

おかげさまで問題が解決しました。ありがとうございます。 querySelectorAllで複数指定できたり":ckecked"が使えるとは知りませんでした。記載サイトも少ないので勉強になりました。

関連するQ&A

  • Javascriptでラジオボタンとチェックボックスの値を足して計算し

    Javascriptでラジオボタンとチェックボックスの値を足して計算しようとしました。 しかし、チェックボックス同士の値は足されるのですが、ラジオボタンの値は計算されずにそのまま表示されます。 ラジオボタンの値も足されるようにするにはどうしたら良いでしょうか。 よろしくお願いいたします。 javascript↓ function calc2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { //formが複数ある場合、formの数だけ繰り返し d = fs[f].elements; //dにform内のエレメントを代入 checkvalue = 0; //checkvalueの値を0にする。ここをcheckvalue = ""; にすると、文字列として扱われる for (var i = 0; i < d.length; i++ ) { //form内のエレメントの数だけ繰り返し if (d[i].checked == true) { //チェックボックスがチェックされていたら checkvalue += Number(d[i].value); //checkvalueの値(整数の場合)にそれぞれのエレメントの値(value)を追加していく } } ss += checkvalue; function addFigure(str) { //3桁のカンマ挿入 var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } var sss = addFigure(ss); //ssの値にカンマを挿入してsssに代入 } document.getElementById('ch_all').innerHTML = "\\" + sss; //html本文内のid="ch_all"の場所に書き出す } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;">&nbsp;</div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>

  • JavaScriptでの空白チェックの方法

    ユーザー登録ページで、項目に空白が入っているかを調べたいと 思っています。 (入力する項目)  ・ユーザID ・パスワード ・名前(カナ)  ・性別(←ラジオボタンで選択する)  ・生年月日(←西暦のみ入力し、月日は選択メニューより選ぶ) このうち、性別と月日は未入力になることはないのですが、 他の項目に関しては、テキストボックスなので、以下のチェックを つけました。 <SCRIPT language="JavaScript"> <!-- function formCheck() { if (document.tourokuForm.userId.value == "" ||    document.tourokuForm.passWord.value == "" ||    document.tourokuForm.name.value == "" ||    document.tourokuForm.year.value == "" )  {    alert("すべての項目を入力してください。");    return false;  } } //--> </SCRIPT> という風なチェックを行っています。 項目の未入力チェックはうまくいくのですが、値ではなく、 「半角空白」、又は「全角空白」のみ入れたときにチェックされず、 空白のまま次のページへとんでしまいます。 コードを使って判断させようと思いましたが、リファレンスの通り に書いてもうまくいきませんでした。 もし知っておられる方がいましたら、ぜひ教えてください!

  • php + javascriptで値の保持

    現在、ラジオボタンによるデータの受け渡しを調べているのですが submitボタンを使わずに、データ遷移がしたいと思い 色々やっているのですが上手く行きません。 これは実現可能なのでしょうか? <input type="radio" name="hoge" value="1" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check1; ?>> <input type="radio" name="hoge" value="2" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check2; ?>> <input type="radio" name="hoge" value="3" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check3; ?>> 上記のソースの様な感じでとりあえずやってみましたが、 「ボタンを押したら即移動」は可能なものの、value値の保持が javascript上でどうやったらいいか分かりません。 ※$check1~3は遷移後のchcked判定の変数です ※test関数においてのvalueを格納する処理が分かりません やはり無難にsubmitボタン+セッション関数等で構築した方が良いのでしょうか?

    • ベストアンサー
    • PHP
  • JavaScript暦1ヶ月未満のペーペーです。

    JavaScript暦1ヶ月未満のペーペーです。 JavaScriptでテキストとラジオボタンの値を同時に別ページへ渡すものを作っているのですが、過去の質問とは微妙に違っていて困っています。 現在ページを2つ作っていて、1ページ目で入力した値(選択したラジオボタンの値)を2ページ目に渡したいのですが、うまく渡せないでいます。 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> テキスト<input type="text" id="tanka1"> ラジオ<input type="radio" name="kosu1" id="rad1" value="1">1 <input type="radio" name="kosu1" id="rad1" value="1">2 <input type="submit" value="送信" onclick=check();> </form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; document.F2.rad1.value=window.opener.document.F1.rad1.value; } </script> </head> <body> <form name="F2"> 1page目テキスト<input type="text" id="tanka1"> 1page目ラジオ<input type="text" id="rad1"> </body> </html> これで実行すると、テキストの方はきちんと値が入るのですが、ラジオのほうが「undefined」と入ってしまいます。 正常に、選んだラジオボタンのvalueが入るようにするにはどうしたらいいでしょうか?

  • JavaScript暦1ヶ月未満のペーペーです。

    JavaScript暦1ヶ月未満のペーペーです。 JavaScriptでテキストとラジオボタンの値を同時に別ページへ渡すものを作っているのですが、過去の質問とは微妙に違っていて困っています。 現在ページを2つ作っていて、1ページ目で入力した値(選択したラジオボタンの値)を2ページ目に渡したいのですが、うまく渡せないでいます。 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> テキスト<input type="text" id="tanka1"> ラジオ<input type="radio" name="kosu1" id="rad1" value="1">1 <input type="radio" name="kosu1" id="rad1" value="1">2 <input type="submit" value="送信" onclick=check();> </form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; document.F2.rad1.value=window.opener.document.F1.rad1.value; } </script> </head> <body> <form name="F2"> 1page目テキスト<input type="text" id="tanka1"> 1page目ラジオ<input type="text" id="rad1"> </body> </html> これで実行すると、テキストの方はきちんと値が入るのですが、ラジオのほうが「undefined」と入ってしまいます。 正常に、選んだラジオボタンのvalueが入るようにするにはどうしたらいいでしょうか?

  • ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには

    どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02 から、1箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例)Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例)テスト';" value="例)テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02

  • CGI(Perl)内での必須項目チェック

    CGI(Perl)内で必須項目のチェックを行うところで 書き方が分からず困っています。 フォームページHTMLファイルにラジオボタンで選択ボタンが2つとテキストエリアが3つあります。 ラジオボタンのnameは、携帯電話。 valueの1つ目は "1"、2つ目は ""(空白)。 テキストエリアの 1つ目のnameは、"携帯1"。2つ目のnameは、"携帯2"。3つ目のnameは、"携帯3"。 ラジオボタンのvalueが"1"の場合は、テキストエリア全てに項目が入っていないとエラーメッセージが出るチェックを作りたいのです。 説明が分かりづらいかもしれないのですが、お力をお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CGI
  • javascriptでフォームに値を渡す

    javascriptでサブウィンドウを開き、親ページにあるフォームの値をサブウィンドウのテキストフィールドに渡す方法で複数項目がある場合、下記URLのようにラジオボタンならうまくいったのですが ラジオボタンなしで、ボタンを押すと直接その値をサブウィンドウに渡す方法はないでしょうか? 複数項目ある値をサブウィンドウに渡す(ラジオボタン) http://ausdruck.flier.jp/test/window11/oya_11.html 上記URLの方法ならうまくいったのですが下記URLのようにボタンを押してその値を 直接サブウィンドウに渡したいとおもっています。 http://ausdruck.flier.jp/test/window3/oya.html ▲こちらのイメージで渡したいのですが、複数項目があるとうまくいきません。

  • チェックボックスが1つ以上チェックされたかチェックしたい

    以下のフォームで、 p_cdのチェックボックスが1つ以上選択されたかチェックしたいのですが、良い方法ございますでしょうか? <form name='test'> <input type="hidden" name="p_name[]" value='xx'> <input type="checkbox" name="p_cd[]" value='1'> <input type="hidden" name="p_name[]" value='yy'> <input type="checkbox" name="p_cd[]" value='1'> </form>

  • JavaScriptにて動的に配列を作成して、POSTで渡したい

    独学でJavaScriptの勉強をしているものです。 勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。 以下のようなフォームがあったとします。 <form name="testForm1"> <input type="hidden" name="id" value="1" /> <input type="checkbox" name="check" /> </form> このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。 それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。 以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。 <form action="hoge" name="testForm2" method="post"> <input type="hidden" name="id" /> </form> function func() { var idArray = new Array(); for ( count = 0; count < document.testForm1.length; count++ ) { if ( document.testForm1.check.checked == true ) { idArray.push( document.testForm.id.value ); } } document.testForm2.id.value=idArray; document.testForm2.submit(); } JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。

専門家に質問してみよう