'Need content to reappear after multiple check boxes are unchecked
I have multiple check-boxes that filter content in another div, after checking a checkbox, only the content that pertains to the checkbox is displayed and the rest is hidden, and as you check more boxes, more content is therefore shown.
The problem I am having is that when i uncheck all of the boxes, all of the content disappears, whereas I want all of the content to appear back when i uncheck all of the boxes.
$(document).ready(function() {
$('div.tags').find('input:checkbox').on('click', function() {
$('.results > div').hide();
$('div.tags').find('input:checked').each(function() {
$('.results > div.' + $(this).attr('rel')).show();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="tags">
<ul class="list-unstyled filterSection">
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="1" id="1" />
<label for="1">1</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="2" id="2" />
<label for="2">2</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="3" id="3" />
<label for="3">3</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="4" id="4" />
<label for="4">4</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="5" id="5" />
<label for="5">5</label>
</label>
</li>
</ul>
</div>
<div class="results" id="">
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="2 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/2.jpg">
<div>
</div>
</a>
</div>
<div class="2 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/2.jpg">
<div>
</div>
</a>
</div>
<div class="3 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/3.jpg">
<div>
</div>
</a>
</div>
<div class="5 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/5.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="4 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/4.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="3 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/3.jpg">
<div>
</div>
</a>
</div>
<div class="4 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/4.jpg">
<div>
</div>
</a>
</div>
</div>Solution 1:[1]
Is this what you looking?
$(document).ready(function () {
const tags = $('div.tags');
const checkboxes = tags.find('input:checkbox');
const results = $('.results');
const resultsDiv = results.find('div');
checkboxes.on('change', function () {
if (checkboxes.get().some(item => item.checked)) {
resultsDiv.hide();
} else {
resultsDiv.show();
}
$('div.tags').find('input:checked').each(function () {
$('.results > div.' + $(this).attr('rel')).show();
});
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="tags">
<ul class="list-unstyled filterSection">
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="1" id="1" />
<label for="1">1</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="2" id="2" />
<label for="2">2</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="3" id="3" />
<label for="3">3</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="4" id="4" />
<label for="4">4</label>
</label>
</li>
<li>
<label class="filter-check clearfix">
<input type="checkbox" rel="5" id="5" />
<label for="5">5</label>
</label>
</li>
</ul>
</div>
<div class="results" id="">
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="2 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/2.jpg">
<div>
</div>
</a>
</div>
<div class="2 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/2.jpg">
<div>
</div>
</a>
</div>
<div class="3 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/3.jpg">
<div>
</div>
</a>
</div>
<div class="5 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/5.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="4 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/4.jpg">
<div>
</div>
</a>
</div>
<div class="1 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/1.jpg">
<div>
</div>
</a>
</div>
<div class="3 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/3.jpg">
<div>
</div>
</a>
</div>
<div class="4 m-3 border-new border border-dark rounded">
<a href="">
<img src="images/4.jpg">
<div>
</div>
</a>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | General Grievance |