checkboxのチェックされてるか否かでの表示／非表示について

Question

チェックボックスにチェックが付いた際にinput内のvalueを取り出し、
表示をさせるといった実装をコントロールしたいです。

こちらのサイト（[https://itsakura.com/js-checkbox]）を参考にさせていただき、
checkboxにチェックしてボタンを押すと値を表示し、非表示にしていたものも表示できるようにまでできました。

ただ、現在の仕様だと値はでるのですが、一番下（みかん）にチェックをいれないと【テキスト入れる】と【最終決定ボタン】がでなくなってしまいました…。
なぜ一番下だけ反応しているのでしょうか…
checkboxボタンにチェックをし、ボタンを押すと表示、全部はずしてボタンを押すと非表示をいったようにコントロールするにはどのようにコードを修正すればいいのかお力を賜わりたくこちらに投稿させていただきました。

<div class="checkListWrap">
			<div class="wrapBorder">
				<p>
			<strong>
				ダミーテキストダミーテキストダミーテキストダミーテキスト
			</strong>
		</p>
			<div id="checkWrap">
				<form action="" method="post" name="form1" target="successIframe" onSubmit="return check()">
						<p class="checkList">
							<input type="checkbox" id="touch1" name="product" value="りんご" class="checkbox-input"> 
							<label for="touch1" class="checkbox01">りんご</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch2" name="product" value="バナナ" class="checkbox-input"> 
							<label for="touch2" class="checkbox01">バナナ</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch3" name="product" value="ナシ" class="checkbox-input"> 
							<label for="touch3" class="checkbox01">ナシ</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch4" name="product" value="ぶどう" class="checkbox-input"> 
							<label for="touch4" class="checkbox01">ぶどう</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch5" name="product" value="もも" class="checkbox-input"> 
							<label for="touch5" class="checkbox01">もも</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch6" name="product" value="マンゴー" class="checkbox-input"> 
							<label for="touch6" class="checkbox01">マンゴー</label>
						</p>

						<p class="checkList">
							<input type="checkbox" id="touch7" name="product" value="みかん" class="checkbox-input"> 
							<label for="touch7" class="checkbox01">みかん</label>
						</p>

						<input type="button" value="商品を確認する" onclick="clickBtn()" id="btn" />

						<div id="product"></div>
							<div id="zero" style="display: none;"><span>テキスト入れる</span>
						<button type="submit" name="button" value="送信" onclick="submitForm()">最終決定ボタン</button>
						</div>
				</form>

				</div><!-- checkWrap -->
				</div><!-- wrapBorder -->



			</div><!-- checkListWrap -->

<script>
  function clickBtn() {
    const arr1 = [];
    const product = document.form1.product;
    for (let i = 0; i < product.length; i++) {
      if (product[i].checked) {
        arr1.push(product[i].value);
        document.getElementById("zero").style.display="block";
      }else if (product[i]){
      	document.getElementById("zero").style.display="none";
      }
    }
    document.getElementById("product").textContent = arr1;
  }
</script>

また、このformはグーグルフォームと連動させようと考えており上記のJavaScriptコードだとname="product"で取得しているのですが【input type="checkbox】に変更して使えるようにもするのは可能でしょうか。
※グーグルフォームを使用する際にnameの値にグーグルフォームから書き出された値を入れたいため、自分で適当に入れた【product】というのは使えないのかなと考えているためです。

拙い投稿ではありますが、お知恵をお借りできれば幸いです。
何卒よろしくお願いいたします。

Answer 1

function clickBtn() {
  const product = [...document.querySelectorAll('[name=product]:checked')].map(x=>x.value);
  document.querySelector("#zero").style.display=product.length?"block":"none";
  document.querySelector('#product').textContent = product.join(",");
}

Comments

[tantalus]

yambejp様
メッセージありがとうございます！
こちら参考にさせていただきまして実装できました！コードもいただきましてありがとうございます！

Answer 2

iはりんごからみかんまでループしますね。
で、ループの最後でiがみかんを指しているとき、
document.getElementById("zero").style.displayには何がセットされますか？
みかんがチェックされていれば"block"、そうでなければ"none"になっちゃいますよね。

Comments

[tantalus]

itagagaki様
メッセージありがとうございます！
素人で申し訳ないのですが、みかんだけに影響しちゃう記述になっているということでしょうか…？
ご質問の返信になっていなかったら申し訳ないですが、みかんだけに反応している表示／非表示状態をすべてのチェックボックスに反応させたいです。

[itagagaki]

> みかんだけに影響しちゃう記述になっているということでしょうか…？

そうではありません。

teratailはプログラミングでのお困りを解決するためのプログラマー向けのサイトですけど（多分）、
そのレベルではないとお見受けしましたので、もう修正案を書いちゃいますね。

function clickBtn() {
const arr1 = [];
const product = document.form1.product;
for (let i = 0; i < product.length; i++) {
if (product[i].checked) {
arr1.push(product[i].value);
}
}
document.getElementById("product").textContent = arr1;
document.getElementById("zero").style.display = arr1.length ? "block" : "none";
}

[tantalus]

ありがとうございます！
コードまでいただきまして恐縮です。知識不足以前の問題かもしれないですが不快にさせてしまったら申し訳ないです。

後学までになんですが、私はプログラマーではありません。
こちらにプログラマーではない者が質問するのは避けたほうが良いのでしょうか？
もしそうであれば他の方にもご迷惑かけないようにしなければと考えないといけない思いまして。

今回はお力をいただきまして本当にありがとうございました！

[itagagaki]

べつに不快ということはないですよ。
ただ、一応、エンジニア／プログラマのためのサイトということになっていますので。
https://teratail.com/tour
そうでない質問もかなり多いのが現状のようにも思いますけどね。

[tantalus]

ありがとうございます！
今後も質問することもあるかと思いますが、知識向上に努めたいと思います。
みなさんそれぞれなんですね。