Как при выборе checkbox добавить class его label?

242

15 февраля 2018, 16:57

Здравствуйте.
При выборе нужного checkbox присваивается класс сразу всем label, а нужно только выбираемому. При повторном нажатии класс не удаляется.
При любом выборе показывается блок .block-all, но вот при повторном нажатии на checkbox (чтобы закрыть все блоки), этот блок не закрывается.
Помогите, пожалуйста, исправить ошибки. Спасибо!

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

.block-ru, 
.block-ua, 
.block-all { 
display: none; 
} 
.label_active { 
color: red; 
}

<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> 
<div class="blocks block-all">Показ при любом выборе</div>

Answer 1

$("#block-box input[type='checkbox']").click(function(){ 
  // hide and deactivate everything 
  $(".blocks").hide(); 
  $(".block-all").hide(); 
  $("#block-box label").removeClass("label_active"); 
  // uncheck all other checkboxes 
  $("#block-box input[type='checkbox']").not(this).each(function(){ 
    this.checked = false;   
  }); 
  // show/activate things for this checkbox, if it is checked 
  if (this.checked) { 
    $("." + $(this).data("blockclass")).show(); 
    $(this).closest("label").addClass("label_active"); 
    $(".block-all").show(); 
  } 
});

.block-ru, 
.block-ua, 
.block-all { 
display: none; 
} 
.label_active { 
color: red; 
}

<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> 
<div class="blocks block-all">Показ при любом выборе</div>