#jquery
#jquery
Вопрос:
Я пытаюсь показать значения, основанные на проверке и снятии флажка
Например, если установлен флажок Показывать всю математику, я хочу отобразить всю панель пакетов, для которой выбрана математика
Аналогично, если установлен флажок Показать всю физику, я хочу отобразить всю панель пакетов, для которой выбран 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/
Не могли бы вы сообщить мне, как это исправить
Ответ №1:
Вы могли бы попробовать что-то вроде этого.
$(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> Я немного изменил разметку, чтобы перейти от выбора флажков вверху к тем, что находятся внутри панелей пакета.
Изменил код, чтобы учесть оба условия ИЛИ и И. Это должно решить вашу проблему.
Комментарии:
1. Спасибо, но это не работает, например, если вы выберете Показать всю математику и показать всю физику, будут показаны неправильные данные.
2. Является ли это условием ИЛИ или и, когда выбрана вся физика и вся математика, должно ли оно возвращать, где выбраны оба или выбраны какие-либо из математики и физики?
3. извините за поздний ответ, все является только условием И
4. пожалуйста, посмотрите эту скрипку jsfiddle.net/cod7ceho/184 это не работает
5. Похоже, есть какая-то проблема с jsfiddle.. Тот же фрагмент кода работает, как и ожидалось, в фрагменте кода Stackoverflow и CodePen: codepen.io/jsreekanth/pen/QKkZbJ amp; jsbin также: jsbin.com/zojihaziqu/edit?html ,js
Ответ №2:
попробуйте этот самый короткий код
$('.actions input').on('change', function () {
if ($('.actions input:checked').length <= 0)
$(".pack-panel").show();
else {
$(".pack-panel").show();
$('.actions input:checked').each(function () {
var cclass = $(this).attr('class').split('filter')[1] "checkbox";
$('.' cclass).each(function () {
if(!$(this).prop('checked')){
$(this).parents('.pack-panel').hide();
}
});
});
}
});
Комментарии:
1. Большое спасибо, пожалуйста, посмотрите эту скрипку jsfiddle.net/cod7ceho/183 когда я проверяю Показать всю математику и показать всю физику, он также отображает вторую строку (под которой физика не выбрана
2. Его a и условие . (НЕ ИЛИ)
Ответ №3:
var fields = ['maths', 'physics', 'chemistry'];
var visible = {};
$('.actions input').on('change', function(){
var atLeastOne = false;
for(var field of fields){
visible[field] = false;
if($('.filter' field).prop('checked')){
visible[field] = true;
atLeastOne = true;
}
}
if(!atLeastOne){
$(".pack-panel").show();
}else{
$(".pack-panel").hide();
for(var field of fields){
if(!visible[field]){ continue; }
$(".pack-panel").each(function () {
if($(this).is(':visible')) { return; }
if($(this).find('.' field 'checkbox').prop('checked')){
$(this).show();
return;
}
});
}
}
});