labelへのaddEventListenerが１クリックで２回動作してしまう

Question

前提・実現したいこと

JavaScriptのaddEventListenerを利用してhtmlのinputタグと紐づいたlabel要素にクリックイベントをつけようとしています。

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

上記を実現すべく、labelにaddEventListenerを利用してクリック時の挙動を書いた際に、labelをクリックするとそれと紐づくinputにも動作が発生してしまい、１クリックで同じ処理が２回走ってしまっています。

該当のソースコード

<label id="checkbox1" class="check_item" for="check_privacy">
<input type="checkbox" name="check_privacy" id="check_privacy">
</label><p>　プライバシーポリシーに同意する</p>

const checkbox1 = document.getElementById("checkbox1");

checkbox1.addEventListener('click', () => {
	if (checkbox1.classList.contains("check_item") == true){
		checkbox1.classList.remove("check_item");
		checkbox1.classList.add("checked");
	} else {
		checkbox1.classList.add("check_item");
		checkbox1.classList.remove("checked");
	}

上記のように条件分岐でまどろっこしく書いていますが、１クリック１動作であればtoggleで良さそうですね・・・。
よろしければお知恵拝借できますと幸いです！

Comments

[babu_babu_baboo]

css で input[type="checkbox"]:checked が使えるのだからそもそもスクリプトなんて、不要では？

[退会済みユーザー]

こちらおっしゃる通りなのですが、jsの方で実装し、チェックが入っているかどうかの値をjs側で取得したいと思っていたため質問に至りました・・・！
すみません、そのあたりも書いておくべきでした。ご質問ありがとうございます！！

Answer 1

チェックボックスのchangeをみて処理すればいいのでは？

window.addEventListener('DOMContentLoaded', ()=>{
  const c=document.querySelector('#checkbox1');
  c.querySelector('[type=checkbox]').addEventListener('change',e=>{
    ['check_item','checked'].forEach(x=>c.classList.toggle(x));
  });
});

Comments

[yambejp]

ちゃんとやるならcheckedとリンクさせるほうがよいと思いますけど

[退会済みユーザー]

ご回答ありがとうございます！
そしてchangeを見て、というのがとてもわかりやすかったです。とても勉強になりました！
お恥ずかしながら、当方jsを勉強し始めたばかりでaddEventListenerのtypeを知らなかったため、
これを機にMDNで取得できるtypeを学ぼうと思います。
ありがとうございました！