javascriptやjqueryでチェックボックスの値（value）を全取得したい

お世話になります。

GoogleAppsScriptを使ってGoogleフォームの画面を自由にカスタマイズする！
https://masa-enjoy.com/gas-createform

上記を参考に簡単なGoogleフォームのカスタマイズを作成いたしました。
以下、ソース

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <main>
        <div class="container">
         <form id="form" action="" method="POST">
            <h1>アンケート</h1>
                <div class="block">
                    <label for="cost" class="block-title"><ruby>好きな食べ物はありますか?
                      <rt></rt></ruby>1</label>
                    <div class="radio-wrapper">
                        <input type="radio" id="q1a" name="q1" class="radio-inline__input">
                        <label for="q1a" class="radio-inline__label">はい</label>
                        <input type="radio" id="q1b" name="q1" class="radio-inline__input">
                        <label for="q1b" class="radio-inline__label">いいえ</label>
                    </div>
                </div>
                <div class="block">
                    <label class="block-title">好きな食べ物は？</label>
                    <div class="radio-wrapper">
                        <input type="checkbox" id="q2a" name="q2" class="radio-inline__input">
                        <label for="detail1" class="radio-inline__label">カレー</label>
                        <input type="checkbox" id="q2b" name="q2" class="radio-inline__input">
                        <label for="detail2" class="radio-inline__label">ラーメン</label>
                    </div>

                <div class="button-wrapper">
                    <span class="submit">送信</span>
                </div>
            </form>
        </div>
        <form id="mG61Hd" action="https://docs.google.com/forms/d/e/〇○○/formResponse" method="POST">
<input type="hidden" id="q1_val" name="entry.(数値)" value="">
<input type="hidden" id="q2_val" name="entry.(数値)" value="">
        </form>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function(){
            //送信ボタンクリック時hedden項目のformをサブミットする
            $('.submit').on('click', function(e){
              $('#mG61Hd').submit();
            });
 //項目が変更されたときに対応するhidden項目の値も変更
            $('input[name="q1"]').on('change', function(e){
                $('#q1_val').val($(this).next().text());
            });
            $('input[name="q2"]').on('change', function(e){
                $('#q2_val').val($(this).next().text());
            });
        });
    </script>
  </body>
</html>

最初は問題なく動いていたように見えたのですが、
テスト送信を繰り返すうちにチェックボックスの値（value）が片方しか取得できないことに気が付きました。
カレーのみ、ラーメンのみは取得できても、両方チェックを入れるとカウントされません。

調べた限りでは、eachでループ処理をしてチェックされた全ての値を取得できるようですが、
今回の様にvalueがない場合がよく分かりませんでした。

以下、動かしてみたサンプルコード

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
$(function(){
$('input[name="checkboxname1"]').on('change', function(e){
$('input[name=checkboxname1]:checked').each(function() {
var v = $(this).val();
alert(v);
});
});
});
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="1">
<input type="checkbox" name="checkboxname1" id="checkboxid2" value="2">
<input type="checkbox" name="checkboxname1" id="checkboxid3" value="3">
<input type="button" value="実行" id="btn">

片方は取得できるので、何か少し処理をプラスするだけでチェックした項目がすべて取得できるような気もするのですが、
チェックボックスの値取得に関してはもっと複雑な処理をしないといけないのでしょうか？

Googleフォームの場合、nameにentry.(数値)を入れれば正常に動作をするのは承知しておりますが、今後もっと多くの選択肢を持ったフォームを作成予定なので、出来ればjqueryで動作させたいという次第です。

yambejp

2023/01/13 03:18

entry.(数値)のあたりをもう少し詳しく説明したほうがよいでしょう

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

回答2件

ベストアンサー

https://insp-recruit.com/2022/01/11/...を参考に、フォームに内容を入力した状態でフォームのHTMLを見てみると、チェックのついた選択肢それぞれに対して<input>が生成されているようです。ですから、フォームの中身もこのようにする必要があります。(MyQuestionerさんのコードでは、q2の入力内容を表す<input>を1個しか用意していないため、複数選んだときにいずれか1つしか取得できません。)

html
1<!--- はい, [カレー, ラーメン]を選んだとき -->
2<div jsname="######">
3    <input type="hidden" name="entry.###" value="はい">
4    <input type="hidden" name="entry.#####" value="カレー">
5    <input type="hidden" name="entry.#####" value="ラーメン">
6</div>
7
8<!--- いいえ, [ラーメン]を選んだとき -->
9<div jsname="######">
10    <input type="hidden" name="entry.###" value="いいえ">
11    <input type="hidden" name="entry.#####" value="ラーメン">
12</div>

例えば、チェックを切り替える度に<input>を追加/削除するのは面倒なので、[送信]ボタンを押したときに<input>をまとめて追加するようにします。

html
1<main>
2    (中略)
3    <form action="https://docs.google.com/forms/d/e/####/formResponse" method="POST" id="mG61Hd" target="_blank"></form>
4<main>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
6<script>
7    $(function(){
8        $('.submit').on('click', function(e){
9            let form = $('#mG61Hd');
10            //フォームを空にする
11            $(form).empty();
12          
13            //q1の入力内容を追加する
14            $(form).append($('<input>', {type: 'hidden', name: 'entry.###', value: $('input[name="q1"]:checked').next().text()}));
15            //q2の入力内容を追加する
16            $('input[name="q2"]:checked').each(function(){
17                $(form).append($('<input>', {type: 'hidden', name: 'entry.#####', value: $(this).next().text()}));
18            });
19            //入力内容を送信する
20            $('#mG61Hd').submit();
21        });
22    });
23</script>

投稿2023/01/13 05:44

編集2023/01/13 05:52

luuguas

総合スコア492

MyQuestioner

2023/01/13 10:26

luuguas様詳しく解説、またご回答いただき有難うございます。おかげさまで問題を解決することが出来ました。

MyQuestioner

2023/01/13 10:27

yambejp様、luuguas様ご回答ありがとうございました。ベストアンサーについてですが「javascriptやjqueryで問題を解決」という事でご質問をいたしましたので、luuguas様にベストアンサーをお付けいたします。回答を頂いたお二人に感謝いたします。

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

q2のチェックボックスがchangeするたびに#q2_valの値が上書きされているからです
受け取った側が複数の値をどう処理できるか次第なのでどうすればいいかは正解はありません
わざわざ別フォームで送る必要もないと思いますが・・・

どうやら複数ある場合は同じnameで送れば良さそうですね。
それであれば別に普通に送信用のformをつくらずにこんな感じでよいかと

javascript
1<form>
2<fieldset>
3<legend>好きな食べ物はありますか?</legend>
4<label><input type="radio" name="entry.1" value="はい">はい</label>
5<label><input type="radio" name="entry.1" value="いいえ">いいえ</label>
6</fieldset>
7<fieldset>
8<legend>好きな食べ物は?</legend>
9<label><input type="checkbox" name="entry.2" value="カレー">カレー</label>
10<label><input type="checkbox" name="entry.2" value="ラーメン">ラーメン</label>
11</fieldset>
12<span onclick="this.closest('form').submit()">送信</span>
13</form>