Допустим, у меня есть два флажка
Один флажок имеет идентификатор myCheckboxOne, а другой - идентификатор myCheckboxTwo. Оба флажка имеют класс checkbox.
. У меня есть разделитель с классом myCheckboxOne-div myCheckboxTwo-div.
Я запускаю цикл $.each, используя jQuery для каждого .checkbox класса.
Если установлен первый флажок, он получает значение идентификатора, равное myCheckboxOne, показывает делитель с классом myCheckboxOne-div или скрывает его.
Однако, есливторой флажок не установлен, он получает значение идентификатора, равное myCheckboxTwo, он скрывает разделитель с классом myCheckboxTwo-div, что означает, что он отменяет первое решение.
Я хочу найти способ отображения разделителя, если установлен хотя бы один флажок, соответствующий имени класса.
$( document ).ready(function() {
$(document).on('click', '.check', chkBtns);
function chkBtns() {
var idboxes;
var i = 0;
$( ".check" ).each(function( index ) {
idboxes = "." + $(this).attr("id") + "-div";// raul - dot is the class
if ($(this).is(':checked')) {
//alert('test');
$("label[for="+$(this).attr("id")+"]").css("background-color", "#fdb813");
$("label[for="+$(this).attr("id")+"]").css("color", "#000");
i++;
$(idboxes).show();
// alert(idboxes);
}
else
{
$("label[for="+$(this).attr("id")+"]").removeAttr('style');
//if at least non "class" was found
$(idboxes).hide();
}
});
/* if no boxes are check, reset the divs*/
if (i == 0) {
$(".all").show();
}
} // function
});
.lbl-all {
background-color: #bbb;
padding: 7px;
border-radius: 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox" id="firstcheckbox" name="check" class="firstcheckbox check">
<label for="firstcheckbox" class="lbl-firstcheckbox lbl-all">My First Checkbox</label>
<input type="checkbox" id="secondcheckbox" name="check" class="secondcheckbox check">
<label for="secondcheckbox" class="lbl-secondcheckbox lbl-all">My Second Checkbox</label>
<input type="checkbox" id="aascheckbox" name="check" class="aascheckbox check">
<label for="aascheckbox" class="lbl-aascheckbox lbl-all">AAS</label>
</body>
</html>
<div class="firstcheckbox-div all" style="width: 300px;">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First
</div>
<br /><br />
<div class="secondcheckbox-div aascheckbox-div all" style="width: 300px;">Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
</div>
Вот мой рабочий код: https://codepen.io/raulgonzalez77/pen/dybxKoy