• ベストアンサー

HTMLでのID

<input type="checkbox" id="tohyokeka1" name="tohyokeka1" value="1"> <input type="checkbox" id="tohyokeka1" name="tohyokeka1" value="1"> <input type="checkbox" id="tohyokeka1" name="tohyokeka1" value="1"> という風にtohyokeka1というid="tohyokeka1"の配列を取得したいのですがどのように記述していいのかが分かりません。どなたか教えて頂けませんでしょうか？ name="tohyokeka1" var formObj = document.getElementById("form"); var idObj = document.getElementById("tohyokeka1"); formObj.tohyokeka1.lengthや formObj.tohyokeka1[count]で、 name配列の数や配列が取得できるのですが、 idObjの配列の個数の取り方と配列の取得方法がわかりません。どなたかお願い致します。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

単純にチェックボックスの一括処理ならいかの ようにやるとよいでしょう <form> <input type=button value="check" onclick=checkFunc("y",true)><br> <input type=button value="No-check" onclick=checkFunc("y",false)><br> <input type="checkbox" class="y"><br> <input type="checkbox" class="y"><br> <input type="checkbox" class="y"><br> <input type="checkbox" class="y"><br> </form> <script languag=javascript> function checkFunc(cn,flg){ var el=document.getElementsByTagName('*') for (var i=0;i<el.length;i++){ if(el[i].className==cn) el[i].checked=flg } } </script>

その他の回答 (3)

  • Blaise
  • ベストアンサー率33% (13/39)
回答No.3

質問でおっしゃっている意味がよくわかりません。 邪推ですが、用語の意味の理解が曖昧なまま、何かを言 おうとしても伝わりません。 まず、しっかりとした基本を身につけられることをアド バイスします。 「配列」というのがよくわかりませんが、単にidObjの 個数を知りたいのであれば、document.formName.length で十分ですよね。 それと、HTMLは省略せずきちんと書くようにしましょう。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

#1さんの補足です getElementsByClassはjavascriptの標準関数では ないですよね？ ただサーチエンジンで探すと結構ヒットするので ユーザー関数として実装するとよいでしょう。 ただしnameもvalueも一緒のチェックボックスを 引っ張ってきて何かやくにたつのかはわかりません。 submitするならnameはtohyokeka1[]などのように 空配列にしておき、valueにはユニークな値を ふっておくと、使い勝手が良いのではないでしょうか？

smiyamoto777
質問者

お礼

ありがとうございます。 説明が足りませんでした。 "□"はチェックボックス □name="tohyokeka1" □name="tohyokeka1" □name="tohyokeka2" □name="tohyokeka2"□name="tohyokeka2" □name="tohyokeka3" ・ ・ ・ という風にチェックボックスが変動して、一括でチェックを付ける機能を追加したいのですが,nameが変動してname配列の取り方が分かりませんでした。上記の場合でいきますと何か良い方法ありませんか？

noname#18558
noname#18558
回答No.1

idは、ページ内で必ずひとつでなければいけません。 その場合は、classを使って getElementsByClassを使えば、配列で結果を受け取れます。

smiyamoto777
質問者

お礼

IDは必ず一つなのですね。ありがとうございます。 そこで、教えて頂いたgetElementsByClassなのですが、使用例とかあれば教えて頂けないでしょうか？ 初心者で調べてみたのですが分かりませんでした。 お願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが１か所以上選択されているかどうかは、 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」の配列名が変化する場合はどのようにすればチェック可能でしょうか？

  • checkboxにチェックも入れていないのに、確認画面にて表示される不具合改善

    パソコン初級者です。宜しくお願い致します。 アンケートを作成しており、知人から頂いたプログラムを使用しております(-_-;) ラジオボタンや、テキストエリアなどは、問題ないのですが、 チェックボックスに限ってのみ、 チェックも入れていないのに、確認画面にて、あたかもチェックされたかのように項目が記載されてしまいます(-_-;) チェックした項目のみを表示するには、 下記のどの部分を変更すればよいのか、どうかご教示下さいませ。 ------------------------------------------ <script language=javascript> function processForm(){ var url_var="Result.htm?" if(navigator.appName != "Netscape") { for(j=0;j<document.form1.elements.length;j++){ var formObj=document.form1.elements[j]; if(formObj.type.toLowerCase() == "text" || formObj.type.toLowerCase() == "password" || formObj.type.toLowerCase().indexOf("select")>-1 || formObj.type.toLowerCase()=="textarea" || formObj.type.toLowerCase() == "checkbox"){ n_var=formObj.name; name_var=escape(n_var); // alert(name_var); value_var=escape(formObj.value); url_var=url_var+name_var+"="+value_var+"&"; //alert(url_var); }else{ if(formObj.type.toLowerCase()=="radio"){ if(formObj.checked){ n_var=formObj.name; name_var=escape(n_var); //alert(name_var); value_var=escape(formObj.value); url_var=url_var+name_var+"="+value_var+"&"; } } } } window.location =url_var.substring(0,url_var.length-1); } else{ for(j=0;j<document.form1.elements.length;j++){ var formObj=document.form1.elements[j]; if(formObj.type.toLowerCase() == "text" || formObj.type.toLowerCase() == "password" || formObj.type.toLowerCase() == "checkbox" || formObj.type.toLowerCase().indexOf("select")>-1 || formObj.type.toLowerCase()=="textarea"){ n_var=formObj.name; name_var=n_var; // alert(name_var); value_var=formObj.value; url_var=url_var+name_var+"="+value_var+"&"; //alert(url_var); }else{ if(formObj.type.toLowerCase()=="radio"){ if(formObj.checked){ n_var=formObj.name; name_var=n_var; value_var=formObj.value; url_var=url_var+name_var+"="+value_var+"&"; } } } } document.form1.action =url_var.substring(0,url_var.length-1); } } // End --> </script> <!--ここまで--><script language=javascript> function wrt(){ if(navigator.appName != "Netscape") { document.write("<form name=form1>") }else{ document.write("<form name=form1 onsubmit=\"return processForm();\">") } } wrt() </script><!--ここまで--></HEAD> <!--ここから--> <BODY> 質問１ <INPUT type="checkbox" name="1_質問" value="赤色">赤色 <INPUT type="checkbox" name="1_質問" value="青色">青色 <TBODY> <TABLE> <TBODY> <TR> <TD><FONT face="ＭＳ明朝Ｐ"><script language=javascript> function wrt1(){ if(navigator.appName != "Netscape") { document.write("<input type=\"button\" name=\"Submit\" value=\" 確認画面へ \" onclick=\"javascript:processForm();\">") }else{ document.write("<input type=\"submit\" name=\"Submit\" value=\" 確認画面へ \">") } } wrt1() </script></FONT></TD> </TR> </TBODY> </TABLE>

  • フォームの制御について

    下記２つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' +　textarea01 + '\n'; ソース： ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> 　<!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' +　textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value="　→回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value="　→回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value="　→その他：" id="checkbox 1-1" > <label for="checkbox 1-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3：</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1"　STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • テーブル内のチェックボックスを、全て選択、全て解除　したい

    以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript"> <!-- var count; function BoxChecked(check){ for(count = 0; count < document.form1.array[].length; count++){ document.form1.array[][count].checked = check; } } //--> </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.html よろしくお願いします。

  • idからエレメント取得するには？

    (1)<INPUT NAME="name1" MAXLENGTH="10" VALUE="" id="id1" > (2)<INPUT NAME="name2" onKeyPress="chk(event);" VALUE="" id="id2"> 上記の二つのinputタグのＩＤからエレメントを取得したいと思っています 知っている限りではgetElementByIdを使おうと思い 例） a = document.getElementById('id1'); b = document.getElementById('id2'); 実行してみた所(1)は上手く行きましたが (2)では上手く行きませんでした。 アラートを表示させ結果を見てみた所 (1)[object] (2)null になりました どうして(2)のほうはエレメントが取れずnullになるのでしょうか？ また(2)のinputタグからエレメントを取る方法はありますでしょうか？ よろしくお願いいたします

  • 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に関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。

  • checkboxクリックされていないidを取得

    <form id="chkform"> <input type="checkbox" name="check" value="aaa" id="aaa">aaa <input type="checkbox" name="check" value="bbb" id="bbb">bbb <input type="checkbox" name="check" value="ccc" id="ccc">ccc 　　　　　　　　　　　　　　　　　　・ 　　　　　　　　　　　　　　　　　　・　 　　　　　　　　　　　　　　　　　　・ <input type="checkbox" name="check" value="zzz" id="zzz">zzz </form> チェックボックスの複数の項目の内、チェックされていない全てのIDを取得する方法を教えてください。 よろしくお願いいたします。

  • ページにHTMLデータを出力の方法につきまして

    いつもお世話になっております。 現在、javascriptを使って5択の問題が出題できるコンテンツを作成しております。五択を選択し、ボタンを押すと、選択した番号や正解不正解をを同じフォーム上の下に表示させたいと思っております。 サイトを参照(http://www.openspc2.org/reibun/JavaScript_technique/sample/06_DOM/007/index.html)して、test01.html内では同じフォーム上に結果を出すことまではできたのですが、テストの種類を増やしたくて、test02.htmlを作りました。test01で使用したプログラムをコピーして、必要そうなID名などだけを変えてみたのですが、test02.htmlでは動いてくれず、行き詰まっていましました。 js側 window.onload = function() { document.getElementById("check").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } //anserboxに格納された値をウィンドウに表示する document.getElementById("result").innerHTML = anserbox; } document.getElementById("check2").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } document.getElementById("result2").innerHTML = anserbox; } } test01.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check" value="チェック" > </form> <div id="result">結果：</div> test02.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check2" value="チェック" > </form> <div id="result2">結果：</div> js側の3行目のdocument.getElementById("check").onclick = function()は実行されるのですがtest01.htmlはokなのですが、 中段にありますdocument.getElementById("check2").onclick = function()はボタンを押しても無反応です。(test02.html) どちらも単体では実行可能でしたので、使い方に間違いがあるのかも知れません。今日一日でわからなかったら質問しようと思っていましたので、投稿致します。 どうかご教授宜しくお願い致します。

  • チェックボックスのチェックについて

    submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ～以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。

  • javascriptでhiddenに二次元配列を格納したい

    現在、Webのシステムでクライアント側のJavaScriptから サーバー側のPHPに値を渡そうと思ってます。 その際に、JavaScriptの配列と連想配列を組み合わせた二次元配列に 値を格納してサーバー側に渡そうと思ってます。 それで以下のような方法を試しているのですが、 hiddenに二次元配列を格納する方法が分からず困ってます。 分かる方がいらしたら教えて頂けますでしょうか。 よろしくお願いいたします。 =========================================== var actionName = document.forms[0].action; var bodyObj = document.body; var formObj = document.createElement("FORM"); var hiddenObj = document.createElement("HIDDEN"); formObj.name = "updateTest"; formObj.action = actionName; formObj.method = "post"; hiddenObj.name = "alltest[][]"; var norArr = new Array(); var hashArr = new Array(); var i = 1; hashArr['test'] = document.getElementById("test" + i).value; norArr[i-1] = hashArr; hiddenObj.value = hashArr; formObj.appendChild(hiddenObj); bobyObj.appendChild(formObj); formObj.submit();

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する