チェックボックスにチェックがついたとき、特定のチェックボックスのチェックを外したい

Question

現在ハンバーガメニューと検索メニューをCSSのチェックボックスを使用して、実装しています。
ただ現状、ハンバーガメニューのtriggerをクリックし、開いた後に検索メニューを開くと、ハンバーガメニューは開いたままの状態です。
なので、ハンバーガメニューにチェックがついたときはsearchメニューは閉じ、searchメニューにチェックがついたときには、ハンバーガメニューを閉じたいのですが、どのようにしたらいいのでしょうか?
JSはバニラ.jsを使用していますので、jquaryなしで書きたいです。

jsでチェックを外すメソッドなどがわかれば、changeイベント使用していけそうな気がしてるのですが、なかなか
見つからず、、

<input type="checkbox" id="burger-toggle" class="c-burger-toggle">
<label for="burger-toggle" class="c-burger">
   ハンバーガーtrigger
 </label>
<div class="c-burger-contents">
ハンバーガーコンテンツ
</div>

<input type="checkbox" id="search-toggle" class="c-search-toggle">
<label for="search-toggle" class="c-search">
   検索trigger
 </label>
<div class="c-search-contents">
検索コンテンツ
</div>

.c-burger-contents{
   opacity: 0;
   visibility: hidden;
   transition:all .1s;
}
 .c-burger-toggle:checked ~ .c-burger-contents{
  visibility:visible;
  opacity: 1;
  transition:opacity .2s;
}

.c-search-contents{
   opacity: 0;
   visibility: hidden;
   transition:all .1s;
}
 .c-search-toggle:checked ~ .c-search-contents{
  visibility:visible;
  opacity: 1;
  transition:opacity .2s;
}

Comments

[itagagaki]

ちょっと質問の意味がよくわからないのですが、えーと、まずハンバーガーメニューというのはどこですか？質問のコードにはチェックボックスが２つあるだけですよね。

[m.ts10806]

>JSはバニラ.jsを使用していますので、jquaryなしで書きたいです。

そもそも現状でそのバニラ.jsのコードすら提示されてないというのは回答者を混乱させます。

[seisei]

あ、一応すごく簡略化したものが上記のソースで、ハンバーガーtriggerをチェックしたときにハンバーガーコンテンツが開く、検索triggerをチェックしたときに検索コンテンツが開くっていう状態です。
ただこのままだと、ハンバーガーtriggerを開いた状態で検索triggerを開くとハンバーガーtriggerも開いて、検索triggerも開いた状態になるので、どちらか片方を開いたら、その他のtriggerのチェックマークを外したい感じです。

Answer 1

ラジオボタンを使うのはどうですか？

<input type="radio" name="toggle" id="burger-toggle" class="c-burger-toggle">

...

<input type="radio" name="toggle" id="search-toggle" class="c-search-toggle">

---

コメントを受けて追記

ラジオボタンだと一回チェックするとチェックを外せない

それであれば、JavaScript を使うしかないと思うので、普通にラベルのクリックイベントを拾って、全部のチェックボックスを外すのがいいでしょう。

EventTarget.addEventListener() - Web API | MDN
Document.querySelectorAll() - Web API | MDN
NodeList.prototype.forEach() - Web API | MDN

コードを追記

一応、コードを書いておきます。

const target = document; // ここで範囲を決める
const labelElements = target.querySelectorAll('label');

labelElements.forEach(el => el.addEventListener('click', e => 
  labelElements.forEach(el => target.getElementById(el.htmlFor).checked = false)
));

Comments

[seisei]

ご回答ありがとうございます。
その方法も考えたのですが、ラジオボタンだと一回チェックするとチェックを外せないので難しいですね。。

[Lhankor_Mhy]

チェックを外す動作も必要なのですね。
問題を把握しました。

ご質問にも追記しておいた方がいいかもですね。

[Lhankor_Mhy]

回答に追記しました。

Answer 2

Lhankor_Mhyさんの回答に乗っかる形になりますが、ラジオボタンを使った上で、JavaScriptで、チェックされているボタンが押された時にはチェックを解除するという手もあると思います。

<input type="radio" name="toggle" id="burger-toggle" class="c-burger-toggle" onclick="selectMenu(this,1);">
<label for="burger-toggle" class="c-burger">
   ハンバーガーtrigger
 </label>
<div class="c-burger-contents">
ハンバーガーコンテンツ
</div>

<input type="radio" name="toggle" id="search-toggle" class="c-search-toggle" onclick="selectMenu(this,2);">
<label for="search-toggle" class="c-search">
   検索trigger
 </label>
<div class="c-search-contents">
検索コンテンツ
</div>

<script>
var checkedNo = 0;

function selectMenu(elem, n) {
  if (n == checkedNo) {
    elem.checked = false;
    checkedNo = 0;
  } else {
    checkedNo = n;
  }
}
</script>

Answer 3

たくさんのご回答ありがとうございました。
回答を参考に下記のソースで解決することができました。

export const useRadioDeselection = ()=> {
  let remove = "";
  const targets = document.querySelectorAll('[data-radio-trigger]');
  targets.forEach((target)=>{
    target.addEventListener('click', function (e) {
      const targetElement = e.target.getAttribute("data-radio-trigger");
      if(remove == targetElement) {
        target.checked = false;
        remove = 0;
      } else {
        remove = targetElement;
      }
    });
  });
  
}