ラジオボタンのバリテーションの挙動について

前提・実現したいこと

ラジオボタンが複数あるフォームで、
未回答がある場合はバリテーションアラート、全て回答している場合はアンカーリンクに飛ばしたいのですが、
うまくいきません

発生している問題・エラーメッセージ

設問に全て回答していてもアラートが出てしまいます。

該当のソースコード

<script type="text/javascript">
			function myCheck(){
			var flag = false;
			if (!( flag)) {
					alert("全てのアンケートに回答してください。");
			} else {
				window.location='#complite';
			}
		}
</script>
<form id="form" method="post" target="hidden_iframe" name="form1">
  <section id="question1">
    <div>
      <input type="radio" name="flag1" id="q1_01" value="はい" required>
      <label for="q1_01">はい</label>
    </div>
    <div>
      <input type="radio" name="flag1" id="q1_02" value="いいえ">
      <label for="q1_02">いいえ</label>
    </div>
  </section>
  <section id="question2">
    <div>
      <input type="radio" name="flag2" id="q2_01" value="はい" required>
      <label for="q2_01">はい</label>
    </div>
    <div>
      <input type="radio" name="flag2" id="q2_02" value="いいえ">
      <label for="q2_02">いいえ</label>
    </div>
    <div>
      <input type="radio" name="flag2" id="q2_03" value="どちらとも言えない">
      <label for="q2_03">どちらとも言えない</label>
    </div>
  </section>
  <section id="question3">
    <div>
      <input type="radio" name="flag3" id="q3_01" value="はい" required>
      <label for="q3_01">はい</label>
    </div>
    <div>
      <input type="radio" name="flag3" id="q3_02" value="いいえ">
      <label for="q3_02">いいえ</label>
    </div>
  </section>
  <section id="question4" class="rel-box">
    <div>
      <input type="radio" name="flag4" id="q4_01" value="全メニュー糖質15g以下" required>
      <label for="q4_01">ダイエットパーソナルジムのトレーナーと<br>
        管理栄養士がダイエットのために開発し、<br>
        全メニュー糖質15g以下に抑えていること。</label>
    </div>
    <div>
      <input type="radio" name="flag4" id="q4_02" value="専門家の全面協力">
      <label for="q4_02">専門家の全面協力</label>
    </div>
    <div>
      <input type="radio" name="flag4" id="q4_03" value="50種類以上のメニュー">
      <label for="q4_03">50種類以上のメニュー</label>
    </div>
    <div id="close">
      <input type="radio" name="flag4" id="q4_04" value="全額返金保証がある">
      <label for="q4_04">全額返金保証がある</label>
    </div>
    <div>
      <input type="radio" name="flag4" id="q4_05" value="レンジで温めるだけで食べられる">
      <label for="q4_05">レンジで温めるだけで食べられる</label>
    </div>
    <div>
      <input type="radio" name="flag4" id="q4_06" value="変更や解約が簡単">
      <label for="q4_06">変更や解約が簡単</label>
    </div>
  </section>
  <button type="submit" name="" value="Submit" onclick="myCheck();">回答する</button>
</form>
<div id="complite">
    ありがとうございました
</div>

試したこと

form に onsubmit="submitted=true;" を追加して、無理矢理アンカーリンクに飛ばすことはできたのですが、エラーメッセージはどうしても一度出てしまいます。

<script type="text/javascript">var submitted=false;</script>
  <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='#complite'}"></iframe>
  <form id="form" method="post" target="hidden_iframe" onsubmit="submitted=true;" name="form1">

各ラジオボタンのチェックフラグも追加してみましたが、やはりうまくいかずのため、チェック自体が動いていないように思います。

<script type="text/javascript">
			function myCheck(){
			var flag = false;
			var check1 = document.form1.flag1.checked;
			var check2 = document.form1.flag2.checked;
			var check3 = document.form1.flag3.checked;
			var check4 = document.form1.flag4.checked;
			if (!( flag)) {
					if (!( check1 || check2 || check3 || check4)) {
				alert("全てのアンケートに回答してください。");
			}
			} else {
				window.location='#complite';
			}
		}
</script>

お心あたりのある方がいらっしゃいましたらご教授いただけましたら幸いですm(__)m

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

回答1件

ベストアンサー

document.form1.flag1.checked;
この状態だとflag1グループに属するラジオボタンの配列になっているのでこいつに.checkedは出来ません。
試しにconsole.logしてみているのでF12キーを押してconsole出力を見てみると分かります。

document.form1.flag1この中の各ラジオボタンにチェックが入っているかどうかを確認しなければなりません。

以下に修正したコードを載せておきます。一応こちらでは動作確認済みです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta content="text/html; charset=utf-8" />
5<title>radio check Sample</title>
6</head>
7<body>
8<form id="form" method="post" target="hidden_iframe" name="form1">
9  <section id="question1">
10    <div>
11      <input type="radio" name="flag1" id="q1_01" value="はい" required>
12      <label for="q1_01">はい</label>
13    </div>
14    <div>
15      <input type="radio" name="flag1" id="q1_02" value="いいえ">
16      <label for="q1_02">いいえ</label>
17    </div>
18  </section>
19  <section id="question2">
20    <div>
21      <input type="radio" name="flag2" id="q2_01" value="はい" required>
22      <label for="q2_01">はい</label>
23    </div>
24    <div>
25      <input type="radio" name="flag2" id="q2_02" value="いいえ">
26      <label for="q2_02">いいえ</label>
27    </div>
28    <div>
29      <input type="radio" name="flag2" id="q2_03" value="どちらとも言えない">
30      <label for="q2_03">どちらとも言えない</label>
31    </div>
32  </section>
33  <section id="question3">
34    <div>
35      <input type="radio" name="flag3" id="q3_01" value="はい" required>
36      <label for="q3_01">はい</label>
37    </div>
38    <div>
39      <input type="radio" name="flag3" id="q3_02" value="いいえ">
40      <label for="q3_02">いいえ</label>
41    </div>
42  </section>
43  <section id="question4" class="rel-box">
44    <div>
45      <input type="radio" name="flag4" id="q4_01" value="全メニュー糖質15g以下" required>
46      <label for="q4_01">ダイエットパーソナルジムのトレーナーと<br>
47        管理栄養士がダイエットのために開発し、<br>
48        全メニュー糖質15g以下に抑えていること。</label>
49    </div>
50    <div>
51      <input type="radio" name="flag4" id="q4_02" value="専門家の全面協力">
52      <label for="q4_02">専門家の全面協力</label>
53    </div>
54    <div>
55      <input type="radio" name="flag4" id="q4_03" value="50種類以上のメニュー">
56      <label for="q4_03">50種類以上のメニュー</label>
57    </div>
58    <div id="close">
59      <input type="radio" name="flag4" id="q4_04" value="全額返金保証がある">
60      <label for="q4_04">全額返金保証がある</label>
61    </div>
62    <div>
63      <input type="radio" name="flag4" id="q4_05" value="レンジで温めるだけで食べられる">
64      <label for="q4_05">レンジで温めるだけで食べられる</label>
65    </div>
66    <div>
67      <input type="radio" name="flag4" id="q4_06" value="変更や解約が簡単">
68      <label for="q4_06">変更や解約が簡単</label>
69    </div>
70  </section>
71  <button type="submit" name="" value="Submit" onclick="myCheck();">回答する</button>
72</form>
73<div id="complite">
74    ありがとうございました
75</div>
76
77<script type="text/javascript">
78function myCheck(){
79    // 選択されているか否かを判定するフラグ
80    var flag1Checked = false;
81    var flag2Checked = false;
82    var flag3Checked = false;
83    var flag4Checked = false;
84
85    console.log(document.form1.flag1); //この状態だとflag1グループに属するラジオボタンの配列になっているのでこいつに.checked出来ない
86    //　ラジオボタンの数だけ判定を繰り返す
87    for(var i=0; i<document.form1.flag1.length; i++){
88        // i番目のラジオボタンがチェックされているかを判定
89        if(document.form1.flag1[i].checked){ 
90            flag1Checked = true;    
91        }
92    }
93    
94    for(var i=0; i<document.form1.flag2.length; i++){
95        // i番目のラジオボタンがチェックされているかを判定
96        if(document.form1.flag2[i].checked){ 
97            flag2Checked = true;    
98        }
99    }
100    
101    for(var i=0; i<document.form1.flag3.length; i++){
102        // i番目のラジオボタンがチェックされているかを判定
103        if(document.form1.flag3[i].checked){ 
104            flag3Checked = true;    
105        }
106    }    
107    for(var i=0; i<document.form1.flag4.length; i++){
108        // i番目のラジオボタンがチェックされているかを判定
109        if(document.form1.flag4[i].checked){ 
110            flag4Checked = true;    
111        }
112    }
113
114    
115    if(!flag1Checked && !flag2Checked && !flag3Checked && !flag4Checked){ // 何も選択されていない場合の処理
116        alert("項目が選択されていません。");
117    } else if(!flag1Checked || !flag2Checked || !flag3Checked || !flag4Checked) { // どれか一つが選択されていない場合の処理
118        alert("全てのアンケートに回答してください。");
119    } else {
120        alert("ありがとうございました");
121        window.location='#complite'; //全て選択されていた場合の処理
122    }
123}
124</script>
125</body>
126</html>