如何根据使用多个 CSS 类选中的复选框过滤分隔线

假设我有两个复选框

一个复选框具有 idmyCheckboxOne，另一个复选框具有 idmyCheckboxTwo。两个复选框都具有类checkbox。

然后我有一个带有类myCheckboxOne-div myCheckboxTwo-div的分隔符.

我在每个.checkbox类上使用jQuery运行一个$.each循环。

如果选中第一个复选框，它将获得 ID 值，即myCheckboxOne，它显示带有类myCheckboxOne-div的分隔符，否则会隐藏它。

但是，如果未选中第二个复选框，它将获得 ID 值，即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

更新：

我依靠的代码有点草率，但现在有效的是检查当前元素是否具有另一个类的类

查看我的 Codepen 完整版：https://codepen.io/raulgonzalez77/pen/dybxKoy

///////////////dev code////////////
if ($(".check-aas").is(':checked')) {
if ($(idboxes).hasClass('aascheckbox-div')) {
//do some thing 
i++;
$(idboxes).show();
//alert(idboxes);//dev alert
}
}

相关内容

最新更新

热门标签：