「全員」にチェックをつけると、全員分の値を取得できるチェックボックスの作り方について

前提・実現したいこと

現在、HTMLのフォームとJavaScriptの配列を使って、チェックボックスにチェックした値を表示するプログラムを組んでいます。
例えばソースコードのようなものです。

表示されている名前・メールアドレスの行のチェックボックスにチェックを入れて登録ボタンを押すと、
チェックした分のメンバーのメールアドレスが、id（今回ならばforTo）で指定した要素の内側に、
HTML形式でまとめて表示されるようにしました。

しかし、個々人でなく特定のグループ全員分のメールアドレスをまとめて取得できるようにもしたいと考えており、
個々人の名前・メールアドレスの行の下（コードならintoTbodyを含むscriptタグの下）に、
各「全員」の行とチェックボックスを配置しました。

この「全員」のチェックボックスにチェックを入れて登録ボタンを押すと、
（「〇〇全員」でなく）そのグループのアドレスをまとめてidの要素内に表示するには、
どのようにコードに加筆修正する必要がありますか？

ご存じの方がおりましたら、恐れ入りますが、ご回答お願いします。

尚、このようなデータテーブルを設けて管理することを想定しています。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <title>MailGroupSet</title>
</head>
<body>
    <form name="destModal">
    <table border="1">
        <thead>
          <tr>
            <th>選択</th>
            <th>氏名</th>
            <th>メールアドレス</th>
          </tr>
        </thead>
        <tbody>
            <script>
                function intoTbody(name,mail,group){
                    document.write(
                        "<tr>" +
                            "<td>" +
                                "<input type='checkbox' name='destMember' value='"+ mail +"'>" +
                            "</td>" +
                            "<td>"+ name +"／グループ："+ group +"</td>" +
                            "<td>"+ mail +"</td>" +
                        "</tr>"
                    );
                }

                intoTbody("徳川慶喜","tokugawa.yoshinobu@bakuhu.net",0);
                intoTbody("井伊直弼","e.naosuke@bakuhu.net",0);
                intoTbody("勝海舟","katsu.kaisyu@bakuhu.net",0);
                intoTbody("近藤勇","isami.kondo@makoto.com",0);
                intoTbody("土方歳三","hijikata.toshizo@makoto.com",0);
                intoTbody("西郷隆盛","saigo.takamori`satsuma.com",1);
                intoTbody("吉田松陰","yoshida.shoin@chosyu.com",1);
                intoTbody("桂小五郎","katsura.kogoro@chosyu.com",1);
                intoTbody("高杉晋作","takasugi.shinsaku@chosyu.com",1);
                intoTbody("坂本龍馬","sakamoto.ryoma@kameyama.com",2);
                intoTbody("中岡慎太郎","nakaoka.shintaro@kameyama.com",2);
                intoTbody("後藤象二郎","goto.shojiro@tosa.com",2);
            </script>
            <tr>
                <td>
                    <input type="checkbox" name="destMember">
                </td>
                <td colspan="2">幕府全員</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="destMember">
                </td>
                <td colspan="2">薩長全員</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="destMember">
                </td>
                <td colspan="2">その他全員</td>
            </tr>
        </tbody>
    </table>
    </form>
    <button onClick="joinAddress()">登録</button>
    <p id="forTo"></p>
<script>
    function joinAddress(){
	    	var arr1 = [];
	    	var to1 = document.destModal.destMember;
	    	for (let i = 0; i < to1.length; i++){
	    		if(to1[i].checked){ //(to1[i].checked === true)と同じ
	    			arr1.push("<span class='each"+(i+1)+" eachAdressTx'>" + to1[i].value + "</span>");
	    		}
            }
            document.getElementById("forTo").innerHTML = arr1;
    }
</script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

各「全員」チェックボックスにはnameかclassを設定しておき、
if文で、そのチェックボックスにチェックがついた状態で登録ボタンが押されれば、
グループごとに設定したclassに該当する人物の行にチェックがついて、
その状態で登録されるのではないか、とも考えました。
（コードの記述方法が分からず、未実装です...）

yambejp

2020/09/15 06:10

質問は、「全員チェックで個別がすべてチェックされる」のか「個別のチェックについた値を単にリストにすればいい」のかわかりません。また、全体チェックを外した場合、個別チェックをはずす必要はありますか？個別のチェックを外した場合、全体チェックを外す必要はありますか？

Nishin

2020/09/15 06:51

・「全員」ボタンを押すことで、そのグループに該当する個別がすべてチェックされる状態、になることです。また、・全体チェックを外した場合は、個別チェックも外したいです。・個別のチェックを外した場合も、全体が選択されている訳ではなくなるので、全体チェックは外したいです。詳細のご確認、ありがとうございます。どうか宜しくお願いします。

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

回答1件

ベストアンサー

なるべく元のコードを残しました。

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
8	<title>MailGroupSet</title>
9</head>
10
11<body>
12	<form name="destModal">
13		<table border="1">
14			<thead>
15				<tr>
16					<th>選択</th>
17					<th>氏名</th>
18					<th>メールアドレス</th>
19				</tr>
20			</thead>
21			<tbody>
22				<script>
23					function intoTbody(name, mail, group) {
24						document.write(
25							"<tr>" +
26							"<td>" +
27							"<input type='checkbox' name='destMember' value='" + mail + `' data-group="${group}">` +
28							"</td>" +
29							"<td>" + name + "／グループ：" + group + "</td>" +
30							"<td>" + mail + "</td>" +
31							"</tr>"
32						);
33					}
34
35					intoTbody("徳川慶喜", "tokugawa.yoshinobu@bakuhu.net", 0);
36					intoTbody("井伊直弼", "e.naosuke@bakuhu.net", 0);
37					intoTbody("勝海舟", "katsu.kaisyu@bakuhu.net", 0);
38					intoTbody("近藤勇", "isami.kondo@makoto.com", 0);
39					intoTbody("土方歳三", "hijikata.toshizo@makoto.com", 0);
40					intoTbody("西郷隆盛", "saigo.takamori`satsuma.com", 1);
41					intoTbody("吉田松陰", "yoshida.shoin@chosyu.com", 1);
42					intoTbody("桂小五郎", "katsura.kogoro@chosyu.com", 1);
43					intoTbody("高杉晋作", "takasugi.shinsaku@chosyu.com", 1);
44					intoTbody("坂本龍馬", "sakamoto.ryoma@kameyama.com", 2);
45					intoTbody("中岡慎太郎", "nakaoka.shintaro@kameyama.com", 2);
46					intoTbody("後藤象二郎", "goto.shojiro@tosa.com", 2);
47				</script>
48				<tr>
49					<td>
50						<input type="checkbox" name="destMember" data-group="0" class="group">
51					</td>
52					<td colspan="2">幕府全員</td>
53				</tr>
54				<tr>
55					<td>
56						<input type="checkbox" name="destMember" data-group="1" class="group">
57					</td>
58					<td colspan="2">薩長全員</td>
59				</tr>
60				<tr>
61					<td>
62						<input type="checkbox" name="destMember" data-group="2" class="group">
63					</td>
64					<td colspan="2">その他全員</td>
65				</tr>
66			</tbody>
67		</table>
68	</form>
69	<button onClick="joinAddress()">登録</button>
70	<p id="forTo"></p>
71	<script>
72		function joinAddress() {
73			var arr1 = [];
74			var to1 = document.destModal.destMember;
75			for (let i = 0; i < to1.length; i++) {
76				if (to1[i].checked) { //(to1[i].checked === true)と同じ
77					arr1.push("<span class='each" + (i + 1) + " eachAdressTx'>" + to1[i].value + "</span>");
78				}
79			}
80			document.getElementById("forTo").innerHTML = arr1;
81		}
82		for (const item of document.getElementsByClassName("group")) {
83			item.addEventListener("change", () => {
84				const targetValue = item.attributes["data-group"].value;
85				for (const checkBox of document.destModal.destMember) {
86					checkBox.checked = checkBox.attributes["data-group"].value === targetValue;
87				}
88			});
89		}
90	</script>
91</body>
92
93</html>