• 締切済み

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」の配列名が変化する場合はどのようにすればチェック可能でしょうか？

みんなの回答

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

フロー的には全数チェックしないでもヒットした時点でbreakしてかまいませんね <script> function check(f){ var check_flg=true; for (var i=0;i<f.length;i++){ if(f[i].type=="checkbox" && f[i].checked){ check_flg=false; break; } } if(check_flg){ window.alert("チェックしてください！"); } } </script> <form> <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"> <input type="button" value="check" onclick="check(this.form)"> </form>

すると、全ての回答が全文表示されます。
回答No.5

多重ループで。 for( var k=0,nm,names=['chk1[]','chk2[]'];nm=names[k];k++){ for (var i=0;i<document.myform.elements[nm].length;i++){ if(document.myform.elements[nm][i].checked){ count++; } } } "chk1[]"や"chk2[]"が１つしかないときはelements[nm].lengthが0になるので、 正確にチェックできませんから、その点は調整しないとダメです。 こういう場合はgetElementsByName()の方が楽ですね。

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

No.3です。 すみません。訂正です。 　×　HTML5ならSelector Apiが使えるので、 　○　Selector Apiをブラウザーがサポートしていれば、

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

HTML5ならSelector Apiが使えるので、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <body> <form id="hoge"> <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"> <button onclick="chk(this.form);return false;" >カウント</button> </form> <script type="text/javascript"> function chk(f){ var count =f.querySelectorAll('[type="checkbox"]:checked').length; if(count==0) window.alert("チェックしてください！"); } </script> </body> </html> で出来る。

すると、全ての回答が全文表示されます。
  • zeff
  • ベストアンサー率69% (137/198)
回答No.2

簡単にgetElementsByTagNameでいいと思います。 <script type="text/javascript"> <!-- function check(f){ var count = 0; var chk = f.getElementsByTagName("INPUT"); for (var i=0;i<chk.length;i++){ if( chk[i].type == "checkbox" && chk[i].checked ){ count++; } } if(!count){ window.alert("チェックしてください！"); } return false; } //--> </script> </head> <body> <form name="myform" id="myform" action="#" onsubmit="return check(this)"> <p> <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"> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>

すると、全ての回答が全文表示されます。
  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.1

チェックボックスを<div id="hoge">でかこっておき、下記のような感じでチェックしてはどうでしょうか？ function isChecked() { //チェックボックスの配置領域を取得 var divElement = document.getElementById('hoge'); //全てのチェックボックスを取得 var checkboxList = divElement.getElementsByTagName('input'); //チェックボックスリストの長さ var len = checkboxList.length; //チェックされているかのフラグ var existsChecked = false; //チェックされているか確認 for (var i = 0; i < len && !existsChecked; i++) { existsChecked = checkboxList[i].checked; } if (!existsChecked) { alert('ひとつもチェックされてない'); } }

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する