- 締切済み
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」の配列名が変化する場合はどのようにすればチェック可能でしょうか？
- hidepyon777
- お礼率33% (3/9)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
フロー的には全数チェックしないでもヒットした時点で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>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
多重ループで。 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.3です。 すみません。訂正です。 × HTML5ならSelector Apiが使えるので、 ○ Selector Apiをブラウザーがサポートしていれば、
- yyr446
- ベストアンサー率65% (870/1330)
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)
簡単に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)
チェックボックスを<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('ひとつもチェックされてない'); } }
