I have some Javascript code that shows/hides elements based on checkboxes, but it does it a little too well! The current code I have applies a style change across all DIVs, but I would like it to only apply to one element with a specific ID, and leave everything else alone. How can I change the Javascript to do what I would like? Here is all relevant code:
The Javascript:
const clicked = () => {
$("#all div").hide();
$("p#checkboxes > :checkbox").change(() => {
$("#all div").hide();
if ($("#showall").is(":checked")) $("#all div").show();
else {
if ($("#red").is(":checked")) $(".red").show();
if ($("#orange").is(":checked")) $(".orange").show();
if ($("#yellow").is(":checked")) $(".yellow").show();
if ($("#green").is(":checked")) $(".green").show();
if ($("#blue").is(":checked")) $(".blue").show();
if ($("#purple").is(":checked")) $(".purple").show();
if ($("#clear").is(":checked")) $(".clear").show();
if ($("#black").is(":checked")) $(".black").show();
if ($("#white").is(":checked")) $(".white").show();
if ($("#brown").is(":checked")) $(".brown").show();
if ($("#grey").is(":checked")) $(".grey").show();
if ($("#pink").is(":checked")) $(".pink").show();
if ($("#marble").is(":checked")) $(".marble").show();
if ($("#smoke").is(":checked")) $(".smoke").show();
if ($("#trans").is(":checked")) $(".trans").show();
if ($("#opaque").is(":checked")) $(".opaque").show();
if ($("#split").is(":checked")) $(".split").show();
if ($("#double").is(":checked")) $(".double").show();
if ($("#splat").is(":checked")) $(".splat").show();
if ($("#og").is(":checked")) $(".og").show();
}
});
};
The Page Code:
<?php include '../masterpressing.php' ?>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<?php
ob_start();
require '../r/gd.php';
require '../r/micf.php';
require '../r/fhti.php';
require '../r/gm.php';
require '../r/crimson.php';
require '../r/ai.php';
require '../r/ta.php';
require '../r/msit.php';
require '../r/ittc.php';
require '../r/st.php';
require '../r/remains.php';
require '../r/damnesia.php';
require '../r/pastlive.php';
ob_end_clean();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>All Albums TEST</title>
</head>
<style>
#checkboxes {
margin: 1px;
}
.x {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<?php echo $stickybar; ?>
<div >
<p id="checkboxes">
<input type="checkbox" id="showall" onclick="clicked()"> Show All
<input type="checkbox" id="red" onclick="clicked()"> Red
<input type="checkbox" id="orange" onclick="clicked()"> Orange
<input type="checkbox" id="yellow" onclick="clicked()"> Yellow
<input type="checkbox" id="green" onclick="clicked()"> Green
<input type="checkbox" id="blue" onclick="clicked()"> Blue
<input type="checkbox" id="purple" onclick="clicked()"> Purple
<input type="checkbox" id="clear" onclick="clicked()"> Clear
<input type="checkbox" id="black" onclick="clicked()"> Black
<input type="checkbox" id="white" onclick="clicked()"> White
<input type="checkbox" id="brown" onclick="clicked()"> Brown
<input type="checkbox" id="grey" onclick="clicked()"> Grey
<input type="checkbox" id="pink" onclick="clicked()"> Pink
<input type="checkbox" id="marble" onclick="clicked()"> Marble
<input type="checkbox" id="smoke" onclick="clicked()"> Smoke
<input type="checkbox" id="trans" onclick="clicked()"> Trans
<input type="checkbox" id="opaque" onclick="clicked()"> Opaque
<input type="checkbox" id="split" onclick="clicked()"> Split
<input type="checkbox" id="double" onclick="clicked()"> 2xLP
<input type="checkbox" id="splat" onclick="clicked()"> Splatter
<input type="checkbox" id="og" onclick="clicked()"> OG
</p>
</div>
<!---|----------------------------------------------------------------------------------->
<div >All Studio Albums <?PHP print $skull; ?> 230 Variants</div>
<!---|----------------------------------------------------------------------------------->
<div >
<div id="all">
<div id="box" ><?php print $gdclock; ?></div>
<div id="box" ><?php echo $gdheart; ?></div>
<div id="box" ><?php echo $gdblue; ?></div>
<div id="box" ><?php echo $gdwhite; ?></div>
<div id="box" ><?php echo $gdclearsplat; ?></div>
<div id="box" ><?php echo $gdredblack; ?></div>
<div id="box" ><?php echo $gdredsplat; ?></div>
<div id="box" ><?php echo $gdpurpleyellowsplat; ?></div>
<div id="box" ><?php echo $gdgreenyellowsplat; ?></div>
<div id="box" ><?php echo $gdredtrans; ?></div>
</div>
</div>
</body>
</html>
The block of code that < ?php print $gdclock; ? > prints:
<?php $gdclock =<<<ALK
<div >
<a href="img/12/GD/clock-a.jpg" data-lightbox="main2" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-a.jpg" one rror="imgError(this);"></a>
<div >First Pressing</div>
<div ><div >PRESSING OF</div> 1000</div>
<div >Black (Clock Face Labels)
<div >
<a href="img/12/GD/clock-a.jpg" data-lightbox="main" data-title="{$inf[gdclock]}">
<a href="img/12/GD/clock-b.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-b.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-cover.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-cover.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-back.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-back.jpg" one rror="this.onerror=null; this.remove();"></a>
<a href="img/12/GD/clock-insert.jpg" data-lightbox="main" data-title="{$inf[gdclock]}"><img src="img/12/GD/tb/clock-insert.jpg" one rror="this.onerror=null; this.remove();"></a>
</div>
</div>
</div>
ALK;
?>
My issue at the moment, is when I click on any of the checkboxes a style="display: none;" tag gets applied to every DIV in my block of code above. I would like the tag to only be applied to the DIVs with an id="box" in my Page Code. Ideally what should happen, is when I click the checkbox with id="red", all of the DIVs with id="box" and with red in their class will be be visible, while all other DIVs with id="box" and no red in their class name will be hidden (style="display: none;"). When unchecked, the style should be removed. I just don't know how to write the Javascript to incorporate the id="box" check. I hope I explained this properly.
(I know that using the same id= more than once in a page is bad html, but it is the only way I could get my DIVs to obey my style rules. Using class didn't seem to work correctly in that section, whereas using id= to stylize works).
CodePudding user response：
I think your primary issue is that you are not hiding the other divs. try something like:
HTML:
<input type="checkbox" id="orange" onclick="clicked()"> test
<input type="checkbox" id="red" onclick="clicked()"> test
<div id="oj" style="display:none;">oj</div>
<div id="r" style="display:none;">r</div>
JS:
clicked = () => {
if($('#orange').is(":checked")) {
$("#oj").show()
} else {
$("#oj").hide()
}
if($('#red').is(":checked")) {
$("#r").show()
} else {
$("#r").hide()
}
};
CodePudding user response：
You should NOT use the same IDs more then once per page. This is sematically incorrect. It works with jQuery just because this is how elements selecting with jQuery works. What you should do is make additional class name for all of the <div> elements you want to show or hide. This will allow you to safely select which divs should be hidden.
Here is more clear example of how you can make the same logic without duplicated IDs or huge amount of conditions. I used .single-entry class name for all the <div> i wanted to toggle.
// Wait for page to load
$(function () {
console.info('Loaded!');
// Checking for change event of the checkboxes
$('.checkboxes input[type=checkbox]').change(function () {
console.info('Checkbox change detected!');
// Hiding all of the divs we need to hide or show depending on the ckecboxes checked
// We use 'single-entry' class name for all the divs instead of IDs
// IDs should *always* be unique for each element
$('.entries .single-entry').hide();
// Show all entries if 'all' checkbox is set
if ($('.checkboxes input[type=checkbox]#all').is(':checked')) {
console.info('All entries should be shown!');
$('.entries .single-entry').show();
return;
}
// Now loop all checked checkboxes and show related entries
$('.checkboxes input[type=checkbox]:checked').each(function () {
const $checkbox = $(this);
const checkboxElementId = $checkbox.attr('id');
console.log(`Checking for entries with class name .${checkboxElementId}`)
// We already checked 'all' checkbox before, skip it
if (checkboxElementId === 'all') {
console.log("We don't need to check this checkbox!");
return;
}
// Show entry if it found in the list of entries
$('.entries .single-entry.' checkboxElementId).show();
})
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this is list of checkboxes you listen -->
<div class="checkboxes">
<div>
<label for="all">
<input type="checkbox" id="all" checked>
<span>Show all</span>
</label>
</div>
<div>
<label for="red">
<input type="checkbox" id="red">
<span>Red</span>
</label>
</div>
<div>
<label for="blue">
<input type="checkbox" id="blue">
<span>Blue</span>
</label>
</div>
<div>
<label for="green">
<input type="checkbox" id="green">
<span>Green</span>
</label>
</div>
</div>
<hr>
<!--
list of entries you displaying or hiding
it's better if you will contain them in some fixed class name
-->
<div class="entries">
<!--
all of the entries should use single class which will indicate
that this div should be displayed or hidden
-->
<div class="single-entry red">This is red entry</div>
<div class="single-entry green">This is green entry</div>
<div class="single-entry blue">This is blue entry</div>
<div class="single-entry green blue">This is green and blue entry</div>
<div class="single-entry blue red">This is blue red entry</div>
</div>