Показывать блок при активном input type="radio"

Question

Необходимо при клике на первый или второй инпут показывать скрытый блок, а когда кликаешь на третий то чтобы он пропадал, как сделать такое?

<input type="radio" class="trigger" name="difficulty" id="difficulty-normal">
<label for="difficulty-normal" class="filter__lang-label">Normal</label>

<input type="radio" class="trigger name="difficulty" id="difficulty-heroic">
<label for="difficulty-heroic" class="filter__lang-label">Heroic</label>

<input type="radio" class="trigger" name="difficulty" id="difficulty-mythic">
<label for="difficulty-mythic" class="filter__lang-label">Mythic</label>



<div style="display:none;">
    <h1>Должен появиться при активном радиоинпуте 1,2 </h1>
/div>

Answer 1

Можно через

document.body.classmates('.difficulty-mythic').forEach(_ => this.addEventListener('change', func));

И в fun() сверяться со значением инпута и проч., при этом условно отображая или скрывая блок, можно завести глобально переменную и менять её

Answer 2

Это говорить о самом простом способе, то пожалуй вот:

document.querySelectorAll('.trigger[type="radio"][name="difficulty"]').forEach(e => {
  e.addEventListener('change', () => {
    if(e.id != 'difficulty-mythic')
      document.querySelector('#div').style.display = ''
    else
      div.style.display = 'none'
  })
})

<input type="radio" class="trigger" name="difficulty" id="difficulty-normal">
<label for="difficulty-normal" class="filter__lang-label">Normal</label>

<input type="radio" class="trigger" name="difficulty" id="difficulty-heroic">
<label for="difficulty-heroic" class="filter__lang-label">Heroic</label>

<input type="radio" class="trigger" name="difficulty" id="difficulty-mythic">
<label for="difficulty-mythic" class="filter__lang-label">Mythic</label>

<div id="div" style="display:none;font-size: 14px;">
    <h1>Должен появиться при активном радиоинпуте 1,2 </h1>
</div>

Тут простая проверка является ли ID - difficulty-mythic, если является то тогда прячем див, если не является то тогда просто убираем скрытие дива.

БЛОГ НА HUSL

Показывать блок при активном input type="radio"

Ответы (2 шт):