CSSの:has()を使ってラジオボタン要素切り替え【JSパターンも】

CSSの:has()が便利だったのでメモです。
当初JSとcssを使ってましたが、has()を使うことでcssのみでいけました。

行いたいこと

• ラジオボタンクリックで要素を表示
• 初期状態では要素非表示

１をclickした場合

２をclickした場合

:has()で要素表示切替

• 初期状態ではaddクラスが非表示
• .wrap:has(#radio1:checked) ... wrap内で#raido1がcheckされていたらblock

<div class="wrap">
    <input type="radio" name="radioName" id="radio1">
    <label for="radio1" onclick="isDisplayTime()">１の場合</label>
    <div class="add js-add">
      <div class="box">要素</div>
    </div>
    <br>
    <input type="radio" value="not_reserve" name="radioName" id="radio2">
    <label for="radio2" onclick="isDisplayNotTime()">２の場合</label>
  </div>

.add {
      width: 100px;
      height: 100px;
      background: lightgreen;
      display: none;
    }
    .wrap:has(#radio1:checked) .add {
      display: block;
    }

CSSのみで完結する！

nameで要素表示切替

※コメントでアドバイスいただいたもの抜粋

• 初期状態ではaddクラスが非表示
• [name=r]:checked .. nameをチェックをしていたら、以降の要素blockとなる

<label>
    <input type='radio' name='r'>
    1の場合
    <div class='add'>要素1</div>
  </label>
  <br>
  <label>
    <input type='radio' name='r'>
    2の場合
    <div class='add'>要素2</div>
  </label>

<style>
    .add {
      width: 100px;
      height: 100px;
      background: lightgreen;
      display: none;
    }
    input[name=r]:checked ~ .add {
      display: block;
    }
  </style>

こちらもCSSのみで完結する！

JavaScriptで要素表示切替

• jsでdomをとってくる
• domに対してblock、noneをjsで切り替え

<input type="radio" name="radioName" id="radio1">
<label for="radio1" onclick="isDisplayTime()">１の場合</label>
<div class="add js-add">
<div class="box">要素</div>
</div>
<br>
<input type="radio" value="not_reserve" name="radioName" id="radio2">
<label for="radio2" onclick="isDisplayNotTime()">２の場合</label>

.add {
  width: 100px;
  height: 100px;
  background: lightgreen;
  display: none;
}

function isDisplay() {
    let add = document.querySelector(".js-add");
    add.style.display = "block";
  }
  function isDisplayNot() {
    let add= document.querySelector(".js-add");
    add.style.display = "none";
  }

cssとjsを使う、has()便利

参考
https://coliss.com/articles/build-websites/operation/css/has-pseudo-class.html