重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【終了しました】教えて!gooアプリ版

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

締切済

  • 質問者：hidepyon777
  • 質問日時：
  • 回答数：6件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： yambejp
  • 回答日時：

フロー的には全数チェックしないでもヒットした時点で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>
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： taloo
  • 回答日時：

多重ループで。



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()の方が楽ですね。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

No.3です。


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

No.3

  • 回答者： yyr446
  • 回答日時：

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>

で出来る。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： zeff#1
  • 回答日時：

簡単に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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yamada_g
  • 回答日時：

チェックボックスを<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('ひとつもチェックされてない');
}
}
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報