3

Как убрать черный квадрат по клику на радио кнопку через display:none?

Подскажите пожалуйста.

.block {
color: #fff;
background: #000;
height: 100px;
width: 100px;
}
<input id="myid" class="myclass" type="radio" name="myname"/>
<div class="block">
</div>

3 ответа 3

5

Можно и на css это реализовать, только эти элементы должны иметь одного родителя

.block {
  color: #fff;
  background: #000;
  height: 100px;
  width: 100px;
}

.block {
  margin-top: 5px;
  color: white;
}

#myid:checked~.block {
  display: none;
}
<div>
  <input id="myid" class="myclass" type="radio" name="myname" />
  <div class="block">
    block-1
  </div>
</div>
<div>
  <div class="block">
    block-2
  </div>
</div>

3

Или так через jQuery:

$('#myid').on('change', function() { $('.block').hide(); });
.block {
color: #fff;
background: #000;
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myid" class="myclass" type="radio" name="myname"/>
<div class="block">
</div>

1
  • нужно больше жыквери
    – ddeadlink
    Commented 4 мая 2018 в 6:31
1
<input id="myid" class="myclass" type="radio" name="myname" 
  onclick="document.querySelector('.block').style.display='none';"/>

или

.block-hide {
  display:none;
}

<input id="myid" class="myclass" type="radio" name="myname" 
  onclick="document.querySelector('.block').classList.add('block-hide');"/>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.