Как при выборе checkbox активировать блок?

225

15 февраля 2018, 14:13

Здравствуйте. Подскажите, пожалуйста, как при выборе checkbox с id="ru"активировать блок .block-ru, а при выборе checkbox с id="ua"активировать блок .block-ua? При этом, при выборе одного checkbox, другой должен дезактивироваться, а при повторном нажатии на уже активированный checkbox, этот активированный checkbox также должен дезактивироваться. Можно ли такое реализовать? Спасибо!

.block-ru, 
.block-ua { 
display: none; 
}

<div id="block-box"> 
<label class="label_ru"><input type="checkbox" name="ru" id="ru" value="1">Россия</label> 
<label class="label_ua"><input type="checkbox" name="ua" id="ua" value="1">Украина</label> 
</div> 
<div class="block-ru">Выбрана Россия</div> 
<div class="block-ua">Выбрана Украина</div>

Answer 1

$("#block-box input[type='checkbox']").click(function(){ 
  $(".blocks").hide(); 
  $("#block-box input[type='checkbox']").not(this).each(function(){ 
    this.checked = false;   
  }); 
  if (this.checked) 
    $("." + $(this).data("blockclass")).show(); 
});

.block-ru, 
.block-ua { 
display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="block-box"> 
<label class="label_ru"><input type="checkbox" name="ru" id="ru" value="1" data-blockclass="block-ru">Россия</label> 
<label class="label_ua"><input type="checkbox" name="ua" id="ua" value="1" data-blockclass="block-ua">Украина</label> 
</div> 
<div class="blocks block-ru">Выбрана Россия</div> 
<div class="blocks block-ua">Выбрана Украина</div>

Answer 2

Обработчик изменения чекбокса пропиши. Данный пример подразумевает, что подключена библиотека jQuery, а также блоков выбора стран может быть больше, чем 2:

$('#block-box input').on('change',function(){
  var th = $(this),
      $blocks = $('[class^="block-"]');
  // Если выбрали текущий блок
  if(th.prop('checked')){
    // Убрать отметки с других чекбоксов, кроме текущего
    th.closest('#block-box').find('input').not(th).prop('checked', false);
    // Скрыть все блоки стран, из них выбрать нужный блок и отобразить его
    $blocks.hide().filter('.block-'+th.attr('name')).show();
  } 
  // Если сняли отметку
  else {
    $blocks.hide();
  }
});