Как скрыть/показать список radio кнопок при переключении checkbox?

Question

[Андрюха]

Как сделать, чтобы вот это содержимое открывалось только после того, как пользователь поставит галочку в checkbox:

<div class="block83">
      <p1>Выбери специальность:</p1><br />
    <input type="radio" value="Chirurg" name="countries[]" class="inputradio123"> <p>Хирург.</p> <br/>
    <input type="radio" value="Neurolog" name="countries[]" class="inputradio123">  <p>Невролог.</p> <br/>
    <input type="radio" value="Psycholog" name="countries[]" class="inputradio123"> <p>Психолог.</p> <br/>
    <input type="radio" value="Terapeuta" name="countries[]" class="inputradio123">  <p>Терапевт.</p> <br/>
    
    </div>

Checkbox:

<div class="block50">
     <input type="checkbox" name="check1" value="1" class="inputradio" /> <p>Я врач.</p> 
    
    </div>

Comments

[Rustam Bainazarov]

Из-за того, что всё это в разных контейнерах, то на CSS даже костылём не сделать.

Тут же простейший обработчик нужен, никакой сложной логики.

[Андрюха]

Рустам Байназаров, намекните как это обработчик найти.

[Rustam Bainazarov]

Андрюха,

[Андрюха]

Рустам Байназаров, работает) Спасибо большое!

<div class="block50">
     <input type="checkbox" name="check1" value="1" class="inputradio" id="input" /> <p>Jestem lekarzem.</p> 
    
    </div>
    
    
    
    
    <div class="block83" id="text">
      <p1>Wybierz swoją specjalizację:</p1><br />
    <input type="radio" value="Chirurg" name="specialty" class="inputradio123"> <p>Chirurg.</p> <br/>
    <input type="radio" value="Neurolog" name="specialty" class="inputradio123">  <p>Neurolog.</p> <br/>
    <input type="radio" value="Psycholog" name="specialty" class="inputradio123"> <p>Psycholog.</p> <br/>
    <input type="radio" value="Terapeuta" name="specialty" class="inputradio123">  <p>Terapeuta.</p> <br/>
    
    </div>


<script>
const checkboxInput = document.getElementById("input");

const textBlock = document.getElementById("text");


checkboxInput.onclick = function() {

  if (checkboxInput.checked) {
    textBlock.style.display = "block";
  } else {
    textBlock.style.display = "none";
  }

}

</script>


<style>
.block83 {
  display: none;
}


</style>

Answer 1

[0xD34F]

.hidden {
  display: none;
}

const checkbox = document.querySelector('.block50 input');
const block = document.querySelector('.block83');
const onChange = e => block.classList.toggle('hidden', !e.target.checked);
checkbox.addEventListener('change', onChange);

UPD. Вынесено из комментариев:

список скрывается только после того, когда поставишь и уберешь галочку

Добавляем класс элементу:

<div class="block83 hidden">

Или отправляем ему событие change, чтобы обработчик сработал и класс добавил:

checkbox.dispatchEvent(new Event('change'));

UPD. Наконец-то дождались, теперь js тут использовать не обязательно:

body:not(:has(.block50 :checked)) .block83 {
  display: none;
}

Comments

[Андрюха]

Вроде работает, только вот список скрывается только после того, когда поставишь и уберешь галочку. То с самого начала он активен, как то так:



Не знаете в чем может быть дело?

[Rustam Bainazarov]

Андрюха, дело в том, что ты забыл скрыть его изначально. Добавь к нему тот класс, что автор вопроса прислал выше.

[Андрюха]

Рустам Байназаров, не могу понять куда его добавить. И этот ли класс вообще нужно добавить?

<div class="block50">
     <input type="checkbox" name="check1" value="1" class="inputradio" /> <p>Jestem lekarzem.</p> 
    
</div>
   
    
<div class="hidden">
    <div class="block83">
    
    
      <p1>Wybierz swoją specjalizację:</p1><br />
    <input type="radio" value="Chirurg" name="specialty" class="inputradio123"> <p>Chirurg.</p> <br/>
    <input type="radio" value="Neurolog" name="specialty" class="inputradio123">  <p>Neurolog.</p> <br/>
    <input type="radio" value="Psycholog" name="specialty" class="inputradio123"> <p>Psycholog.</p> <br/>
    <input type="radio" value="Terapeuta" name="specialty" class="inputradio123">  <p>Terapeuta.</p> <br/>
    
    
    </div>
    
    
</div>

[0xD34F]

список скрывается только после того, когда поставишь и уберешь галочку

дополнил ответ

[Андрюха]

0xD34F, немного поздно, но все равно спасибо)

Answer 2

[Alex]

<div class="block50">
     <input type="checkbox" name="check1" value="1" class="inputradio" onclick="go()"/> <p>Я врач.</p> 
    
    </div>

<div class="block83" id="check" style="display:none;">
      <p1>Выбери специальность:</p1><br />
    <input type="radio" value="Chirurg" name="countries[]" class="inputradio123"> <p>Хирург.</p> <br/>
    <input type="radio" value="Neurolog" name="countries[]" class="inputradio123">  <p>Невролог.</p> <br/>
    <input type="radio" value="Psycholog" name="countries[]" class="inputradio123"> <p>Психолог.</p> <br/>
    <input type="radio" value="Terapeuta" name="countries[]" class="inputradio123">  <p>Терапевт.</p> <br/>
    
    </div>

<script>
function go()
{
  $('#check').css('display,'block');
}
</script>

Comments

[Alex]

На checkbox навесил onclick.
На блок с radio навесил id
Написал ф-ю. (юзал JQ, можешь на чистом js аналог написать)

[Андрюха]

Alex, не работает. Теперь постоянно скрыто.

[Андрюха]

Alex, получилось, вопрос закрыт. Всем спасибо!