いつもご親切かつ丁寧に回答くださる方ありがとうございます。

###前提・実現したいこと
タイトルにも表記しています通り、複数選択可能のチェックボックスがある場合、一つ以上を必須にしたいと思っております。
そこで、「複数選択チェックボックスを入力必須にする」と「jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする」を参考にスクリプトを書いてみたのですが、チェックボックスを選択しなくてもページ遷移（回答ありがとうございました、のような結果が出力されるページです）してしまいます。

javascript
1<script>
2$(document).ready(function(){
3	$("#form").validate({
4		rules:{
5			'#checkBtn': {required: true}
6		},
7		messages :{
8			'#checkBtn':{required: "１つ以上選択してください"}
9		},
10		errorPlacement :function(error,element){
11			if (element.attr("id") == "#checkBtn" ) error.insertAfter("#error");
12			else (element.attr("id") == "id" ) error.insertAfter(element);
13		}
14	});
15});
16</script>

php
1echo '<p align="left" style="display:inline-block;">';
2	for($j=1; $j<=10; $j++){
3		if($col['format']==$frmtR){
4		//ラジオボタン
5			if($col['answer'.$j]){
6				if($col['required'.$k]){
7					echo"<input required type='radio' name='question{$question_count}' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
8				}else{
9					echo"<input type='radio' name='question{$question_count}' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
10				}
11			}
12		}elseif($col['format']==$frmtC){
13		//チェックボックス
14			echo '<div id="error">';
15			if($col['answer'.$j]){
16					if($col['required'.$k]){
17							echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' id='checkBtn'>".$col['answer'.$j].'<br>';
18					}else{
19							echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
20					}
21			}
22			echo'</div>';
23		}elseif($col['format']==$frmtT){
24		//テキストボックス
25			if($col['answer'.$j]){
26				if($col['required'.$k]){
27					echo"<input required type='text' name='question{$question_count}' value=''>".$col['answer'.$j].'<br>';
28				}else{
29					echo"<input type='text' name='question{$question_count}' value=''>".$col['answer'.$j].'<br>';
30				}
31			}
32		}
33	}
34$question_count++;
35
36	//その他
37	if($col['other'.$k]){
38		echo $col['other'.$k]."<input type='text' name='question{$question_count}' id='question{$question_count}' value=''>";
39	}
40echo "<input type='hidden' name='question_id' value='".$col['questionnaires_id']."'>";
41}
42echo'</p>';
43

このように、条件分岐でチェックボックスを取得してきております。

###試したこと
参考させていただいたページのとおりにnameの部分を使って実行してみたのですが、チェックボックスを選択しなくても送信されてしまいました。

###補足情報(言語/FW/ツール等のバージョンなど)
PHPのバージョンは5.3.1です。
エディタはサクラエディタを利用しています。

###追記

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" ;/>
5<link href="css/questionStyle.css" type="text/css" rel="stylesheet">
6<title>アンケート</title>
7
8<script>
9$(document).ready(function(){
10    $("#form").validate({
11        rules:{
12            '#checkBtn': {required: true}
13        },
14        messages :{
15            '#checkBtn':{required: "１つ以上選択してください"}
16        },
17        errorPlacement :function(error,element){
18            if (element.attr("id") == "#checkBtn" ) error.insertAfter("#error");
19            else (element.attr("id") == "id" ) error.insertAfter(element);
20        }
21    });
22});
23</script>
24
25</head>
26<body>
27
28<form action ="send.php" method="post" id="form">
29<h1 align="center">あんけえと</h1>
30<hr>
31<div class="question" align="center">
32<p>Q1.くえすちょん</p>
33<p align="left" style="display:inline-block;">
34	<input type='checkbox' name='question1[]' value='いち' id='required'>いち<br>
35	<input type='checkbox' name='question1[]' value='に' id='required'>に<br>
36	<input type='checkbox' name='question1[]' value='さん' id='required'>さん<br>
37	<input type='checkbox' name='question1[]' value='よん' id='required'>よん<br>
38	<input type='checkbox' name='question1[]' value='ご' id='required'>ご<br>
39	<input type='hidden' name='question_id' value='1'>
40</p>
41</div>
42<div align="right">
43	<input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;">
44</div>
45</form>
46<div id="error">
47</div>
48</body>
49</html>

質問はHTMLベースでおこなってください。

PHPをブラウザで開き、ソースをコピーしてみたのですが、このような感じであっていますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

クライアントサイドでバリデートするならphpで例示されても困ります。
質問はHTMLベースでおこなってください。

ラジオボタンやテキストボックスに「◯◯[]」のようなnameをつけるのも
あまりお勧めしません。

なおjavascriptでバリデートしても、ユーザーから送られてくるデータは
常に不正である前提で、サーバー側でもバリデートが必要ですのでご注意ください

javascript
1<script>
2$(function(){
3  $('input[type=button][value=check]').on('click',function(){
4    var flg=$('input[type=checkbox][name="hoge[]"]:checked').length>0;
5    alert(flg?'OK':'NG!');
6  });
7});
8</script>
9<form>
10<input type="checkbox" name="hoge[]" value="1">1<br>
11<input type="checkbox" name="hoge[]" value="2">2<br>
12<input type="checkbox" name="hoge[]" value="3">3<br>
13<input type="button" value="check">
14</form>
15

追記

ご提示のソースだとidがユニークでないので問題です。
また、必須項目の情報をタグに持たせるかどうかは微妙ですね。
プログラム側で判断するなら、こんな感じです

HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $("#form").on('submit',function(e){
5    var flg=$(this).find('input[name="question1[]"]:checked').length==0;
6    if(flg){
7      e.preventDefault();
8      alert("１つ以上選択してください");
9    }
10  });
11});
12</script>
13
14</head>
15<body>
16
17<form action ="send.php" method="post" id="form">
18<h1 align="center">あんけえと</h1>
19<hr>
20<div class="question" align="center">
21<p>Q1.くえすちょん</p>
22<p align="left" style="display:inline-block;">
23    <input type='checkbox' name='question1[]' value='いち'>いち<br>
24    <input type='checkbox' name='question1[]' value='に'>に<br>
25    <input type='checkbox' name='question1[]' value='さん'>さん<br>
26    <input type='checkbox' name='question1[]' value='よん'>よん<br>
27    <input type='checkbox' name='question1[]' value='ご'>ご<br>
28    <input type='hidden' name='question_id' value='1'>
29</p>
30</div>
31<div align="right">
32<input type="submit" value="送信する" id="send" name="send" style="width:100px; height:30px;">
33</div>
34</form>
35<div id="error">
36</div>
37</body>
38</html>

投稿2016/12/13 05:40

編集2016/12/13 07:53

yambejp

総合スコア114839

nyowaa

2016/12/13 07:11

yambejp様ありがとうございます。追記にHTML形式のコードを書かせていただきました！

nyowaa

2016/12/14 00:35

追記ありがとうございます！ var flg=$(this).find('input[name="question1[]"]:checked').length==0;のnameの部分、question1のページを開いている時は上手く作動するのですが、name部分の部分をサーバーから取得してきているため、name"question{$qnum}[]":checkedと表記したところ、上手く作動してくれませんでした。

yambejp

2016/12/14 00:39

なるほど、では、 var flg=$(this).find('input[name$="[]"]:checked').length==0; としてみてください nameのケツが「[]」で終わる領域をチェックしてくれますただしquestion1[]とquestion2[]が同じ領域に存在し、どちらも1箇所以上をチェックしなくては行けない場合は工夫が必要になります

nyowaa

2016/12/14 00:43

無事解決することができました！今後とも何卒宜しくお願い致します。

nyowaa

2016/12/14 00:56

申し訳ありません、確認してみたところ、配列などを使っていないラジオボタン等を取得した際に、選択していても「１つ以上選択してください」のアラートが表示されてしまいました・・・試しにifの中にvar flg 〜・・・を写してみたところ、ラジオボタン等はうまく動作したのですが、逆に先ほど解決できていたチェックボックスが振り出しに戻ってしまいました。。。何度も申し訳ありません、何卒よろしくお願い致します。

yambejp

2016/12/14 02:43

チェックせずに中途半端にかいてすみません。ケツが「[]」のアイテムがあるのに、チェックされてない場合という条件付けが必要ですね var flg=$(this).find('input[name$="[]"]').length>0 && $(this).find('input[name$="[]"]:checked').length==0; でどうでしょうか？