In my demo below, checking single checkboxes has the desired effect to hide/show divs. Checking grouped checkboxes also works, but the checking here has no effect on hiding/showing the divs. I feel like my javascript code is missing just a minor fix for this to work, what I don't understand is: I thought I'm already checking for the state of the checkboxes, but why does nothing happen to the divs when multiple states of checkboxes are changed? Can you please help me find the solution?
"use strict"
// START TREEVIEW
let toggler = document.getElementsByClassName("caret1");
let dac;
for (dac = 0; dac < toggler.length; dac++) {
toggler[dac].addEventListener("click", function () {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret1-down");
});
}
// END TREEVIEW
// START CHECKBOX HIDE/SHOW SYNCHRONIZING
$(document).ready(function() {
$(new Array(8).fill(1).map( (_, i) => i+1 )).each(function(idx, x) { // Array for the number of div elements
$('#entry' + x)[($('#checkbox' + x).is(":checked")? "show" : "hide")](); // synchronize
$('#checkbox' + x).change(function() { // toggle on change
$('#entry' + x).toggle();
});
$.fn.nestedCheckboxes = function (stopPropogation) {
this.addClass('nestedCheckboxes');
this.click(nestedCheckboxHandler);
this.delegate(':has( > input[type=checkbox])', 'click', nestedCheckboxHandler);
function nestedCheckboxHandler (evt) {
if ($(evt.target).is("input[type=checkbox]")) {
var parentContainer = $(this);
var checkbox = parentContainer
.find(' > input[type=checkbox]:eq(0)');
var parentCheckbox = parentContainer
.parent()
.closest(':has( > input[type=checkbox])')
.children('input[type=checkbox]');
if (evt.target == checkbox[0]) {
$('input[type=checkbox]', parentContainer)
.prop("checked", checkbox.prop("checked"));
}
var parentCheckboxValue = !parentCheckbox
.parent()
.find("input[type=checkbox]")
.not(parentCheckbox[0])
.is("input[type=checkbox]:not(:checked)");
parentCheckbox.prop("checked",parentCheckboxValue);
} else if (stopPropogation) {
evt.stopPropagation();
}
};
};
$(function () {
$('div').nestedCheckboxes();
});
});
});html, body {
font-size:10px;
font-family: Helvetica, sans-serif !important;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden !important;
}
.some-space {
height:25px;
}
.checkbox-div,
.container-div {
margin-left:25px;
}
.container-div {
margin-top:70px;
}
#entry1,#entry3,#entry4,#entry5,#entry6,#entry7,#entry8{
margin-top:10px;
display: none;
}
.caret {
cursor: pointer;
user-select: none;
}
.caret-down::before {
transform: rotate(90deg);
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 7px;
}
.nested {
display: none;
}
.active {
display: block;
}
.label {
color: #d4d4d4;
font-weight: normal;
font-size: 10px;
text-align: center;
line-height: 1;
width: 100% !important;
height: auto;
text-overflow: ellipsis;
overflow: hidden;
}
.label.a:hover {
opacity: 1 !important;
}
.sidebarContent {
margin-left: 20px;
}
.wrapMyUL,
.wrapMyUL2 {
line-height: 1.9em;
height: auto;
animation-name: modalbox;
animation-duration: .4s;
overflow-y: scroll;
overflow-x: scroll;
}
.wrapMyUL{
margin-top: 1px;
}
ul,
#myUL2 {
list-style-type: none;
}
#myUL2 a {
color: #c8c8c8;
}
#myUL2 {
height: auto;
line-height: 1.9em;
animation-name: modalbox;
animation-duration: .4s;
}
#myUL2 li {
min-width: 200px;
}
/* Main Level */
ul {
margin-left: -20px;
}
ul#myUL2 {
padding:0px 0px 0px 20px;
}
ul.nested.active span.caret2::before,
ul.nested.suboption.active span.caret1 {
padding-left: 5px;
}
ul.nested.active span.caret2::before,
ul.nested.suboption.active span.caret2::before {
display: none;
}
ul.nested.active span.caret2,
ul.nested.suboption.active span.caret2 {
padding-left: 5px;
}
.sup-1 {
color: #000000;
}
.caret1,
.carret2 {
cursor: pointer;
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
animation-name: modalbox;
animation-duration: .4s;
}
.caret1::before {
content: "\25B6";
color: #c8c8c8;
display: inline-block;
margin-right: 7px;
}
.caret1-down::before {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari */
transform: rotate(90deg);
}
.caret2::before {
content: "\25B6";
color: transparent;
display: inline-block;
margin-right: 7px;
}
.caret2-down::before {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari */
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
animation-name: modalbox;
animation-duration: .4s;
}
/* Animation */
@-webkit-keyframes modalbox {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modalbox {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checkbox Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="some-space"></div>
<div class="row">
<div class="col-md-7 col-7">
<div class="sidebarContent">
<div class="container">
<div class="row filters-title">
<div class="col-md-12">
<p class="colorYellow ce1">SHOW/HIDE:</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="wrapMyUL2">
<ul id="myUL2">
<form>
<li>
<input type="checkbox" />
<span class="caret1 caret1-down">SHOW/HIDE ALL</span>
<ul class="nested active">
<li>
<input type="checkbox" />
<span class="caret1 caret1-down">SHOW/HIDE GROUP
#1</span>
<ul class="nested suboption active">
<li>
<input type="checkbox" id="checkbox1" value="1" />
<label id="checkbox1label" for="checkbox1">checkbox
#1</label>
</li>
<li>
<input type="checkbox" id="checkbox2" value="1" checked />
<label id="checkbox2label" for="checkbox2">checkbox
#2</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox3" value="1" />
<label id="checkbox3label" for="checkbox3">checkbox
#3</label>
</li>
<li>
<input type="checkbox" />
<span class="caret1 caret1-down">SHOW/HIDE GROUP
#2</span>
<ul class="nested suboption active">
<li>
<input type="checkbox" />
<span class="caret1 caret1-down">SHOW/HIDE
SUBGROUP #2.1</span>
<ul class="nested suboption active">
<li>
<input type="checkbox" id="checkbox4" value="1" />
<label id="checkbox4label" for="checkbox4">checkbox
#4</label>
</li>
<li>
<input type="checkbox" id="checkbox5" value="1" />
<label id="checkbox5label" for="checkbox5">checkbox
#5</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox6" value="1" />
<label id="checkbox6label" for="checkbox6">checkbox
#6</label>
</li>
<li>
<input type="checkbox" />
<span class="caret1 caret1-down">SHOW/HIDE GROUP #2.2</span>
<ul class="nested suboption active">
<li>
<input type="checkbox" id="checkbox7" value="1" />
<label id="checkbox7label" for="checkbox7">checkbox
#7</label>
</li>
<li>
<input type="checkbox" id="checkbox8" value="1" />
<label id="checkbox8label" for="checkbox8">checkbox
#8</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</form>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="some-space"></div>
</div>
<div class="col-md-5 col-5">
<div class="container-div">
<p><b>CONTENT DIVS</b></p>
<div id="entry1">
CONTENT DIV #1
</div>
<div id="entry2">
CONTENT DIV #2
</div>
<div id="entry3">
CONTENT DIV #3
</div>
<div id="entry4">
CONTENT DIV #4
</div>
<div id="entry5">
CONTENT DIV #5
</div>
<div id="entry6">
CONTENT DIV #6
</div>
<div id="entry7">
CONTENT DIV #7
</div>
<div id="entry8">
CONTENT DIV #8
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire