我试图显示基于CheckBox检查和取消选中的值
例如,如果选择了“显示所有数学复选框”,我想显示所有选择了数学的包面板
同样,如果选择了Show All Physics CheckBox,我想显示选择了Physiscs的所有包面板
我试过这种方式
$(document).on('change','.filtermaths',function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mathscheckBox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change','.filterphysics',function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.physicscheckBox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change','.filterchemistry',function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.chemistrycheckBox').prop('checked')
$(this).toggle(visible);
});
});
但这不符合预期
这是我的小提琴
http://jsfiddle.net/cod7ceho/135/
能告诉我如何解决这个问题吗？
解决方法
你可以尝试这样的事情.
$(document).on("change",".actions",function(event) {
if ($("input[name='includeAll']:checked").val() === "OR") {
if ($("input:checked",$(".actions")).length === 0) {
$(".pack-panel").addClass("visible").removeClass("hidden");
} else {
$(".pack-panel").addClass("hidden");
}
$("input:checked",$(".actions")).each(function() {
var $target = $(this);
var isChecked = $target.prop("checked");
var value = $target.data("course-flag");
if (isChecked) {
$("." + value + "-checkBox:checked").closest(".pack-panel").addClass("visible").removeClass("hidden");
}
});
} else {
var selectedCourses = [];
$("input:checked",$(".actions")).each(function() {
selectedCourses.push($(this).data("course-flag"));
});
selectAll(selectedCourses);
}
});
function selectAll(courses) {
$(".pack-panel").each(function() {
var $panel = $(this);
var allSelected = true;
courses.forEach(function(course) {
if ($panel.find("." + course + "-checkBox:checked").length === 0) {
allSelected = false;
}
});
if (allSelected) {
$panel.addClass("visible").removeClass("hidden");
} else {
$panel.removeClass("visible").addClass("hidden");
}
});
}
.visible {
display: block;
}
.hidden {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" value="AND" name="includeAll" checked/>AND
</label>
<label>
<input type="radio" value="OR" name="includeAll" />OR
</label>
<div class="row">
<div class="col-lg-9 actions">
<label class="mt-checkBox mt-checkBox-outline">
<input class="filtermaths" data-course-flag="maths" type="checkBox">Show All Maths<span></span>
</label>
<label class="mt-checkBox mt-checkBox-outline">
<input class="filterphysics" type="checkBox" data-course-flag="physics">Show All Physics<span></span>
</label>
<label class="mt-checkBox mt-checkBox-outline">
<input class="filterchemistry" type="checkBox" data-course-flag="chemistry">Show All Chemistry<span></span>
</label>
</div>
<hr>
<div class="sortable col-lg-12" id="pacstable">
<div class="portlet portlet-sortable light bordered pack-panel">
<div class="portlet-title">
<div class="row">
<div class="col-md-7">
<div class="packdtsl">
<div class="packimg"></div>
<ul>
<li>
<span class="title pac_inner">Student Name:</span>
<span>
<h1 class="studentname">Mark</h1>
</span>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="packrow">
</div>
</div>
<div class="col-md-3">
<div class="packrow">
<ul>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="physics-checkBox" value="physics" type="checkBox" checked="">Physics<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="chemistry-checkBox" value="chemistry" type="checkBox" checked="">Chemistry<span></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="portlet portlet-sortable light bordered pack-panel">
<div class="portlet-title">
<div class="row">
<div class="col-md-7">
<div class="packdtsl">
<div class="packimg"></div>
<ul>
<li>
<span class="title pac_inner">Student Name:</span>
<span>
<h1 class="studentname">Micheal</h1>
</span>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="packrow">
</div>
</div>
<div class="col-md-3">
<div class="packrow">
<ul>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="physics-checkBox" value="physics" type="checkBox" checked="">Physics<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="chemistry-checkBox" value="chemistry" type="checkBox" unchecked="">Chemistry<span></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="portlet portlet-sortable light bordered pack-panel">
<div class="portlet-title">
<div class="row">
<div class="col-md-7">
<div class="packdtsl">
<div class="packimg"></div>
<ul>
<li>
<span class="title pac_inner">Student Name:</span>
<span>
<h1 class="studentname">Roger</h1>
</span>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="packrow">
</div>
</div>
<div class="col-md-3">
<div class="packrow">
<ul>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="physics-checkBox" value="physics" type="checkBox" unchecked="">Physics<span></span>
</label>
</li>
<li>
<label class="mt-checkBox mt-checkBox-outline">
<input class="chemistry-checkBox" value="chemistry" type="checkBox" unchecked="">Chemistry<span></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我稍微修改了标记,以便从顶部的复选框选择到包面板内的复选框进行查找.
修改了代码以适应OR和AND条件.这应该可以解决您的问题.