Develop Reference

Hide a div tag if the next ul's li's are all displayed none

I have some HTML with divs and next sibling uls like this:
<div id="someid" class="someclass">
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>
How to make the div with class title display: none if next ul's li's are all display: none?

Unfortunately, today's CSS can't do that (see below for tomorrow's CSS), but with JavaScript you can loop through the .title elements and see if their next element is a ul and all of its child elements are display: none, and set the title element to display: none if so:
for (const element of document.querySelectorAll(".title")) {
if (element.nextElementSibling.tagName === "UL" &&
[...element.nextElementSibling.children].every(
(child) => getComputedStyle(child).display === "none"
)) {
element.style.display = "none";
}
}
<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>
You might factor out at least the every calback (and possibly the whole check):
const isDisplayNone = (element) => getComputedStyle(element).display === "none";
for (const element of document.querySelectorAll(".title")) {
if (element.nextElementSibling.tagName === "UL" &&
[...element.nextElementSibling.children].every(isDisplayNone)
) {
element.style.display = "none";
}
}
<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>
With tomorrow's CSS, we can do it if we change the structure slightly to add a wrapper div and we hide the li elements with a class rather than inline styling (which is almost always best anyway):
.hidden {
display: none;
}
.container .title {
display: none;
}
.container:has(li:not(.hidden)) .title {
display: block;
}
<p><strong>Only works on cutting-edge browsers!!</strong></p>
<div id="someid" class="someclass">
<div class="container">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li>4</li>
</ul>
</div>
<div class="container">
<div class="title">Should Hide</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>
<div class="container">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li>2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>
</div>
That will only work on cutting-edge browsers such as Chrome v105 and higher (not even Chrome v104 has it). More about :has here on MDN and in the spec.

T.J. Crowders "tomorrow" CSS using :has does not require changing the layout - only replacing inline style with a class (as in his answer) - but that's all that needs to change
Note: this works in Chrome and Edge (not sure about Safari) - in Firefox this does not work even with the :has config flag enabled - Firefox doesn't like the sibling selector (i.e. +) in :has
.hidden {
display: none;
}
.title:not(:has(+ul>:not(li.hidden))) {
display: none;
}
<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li>2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>

Get parent child label/value upon checkbox selection of child li elements

I'm trying to get the value of the lvl1 and lvl2 li labels upon selection of the checkbox of their respective child li.
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to get the value upon checkbox for their respective parents-child relationship
Click first checkbox to get this value.
Level-1 > Level-2 > Level-3 Value 1
Click 2nd checkbox to get the below value.
Level-1 > Level-2 > Level-3 Value 2

you can add on change event and get all li parents of changed input to get the info about the li 'level' I added this as data attribute:
$(document).ready(function(){
$('.childbox').change(function(){
var parents="";
var current_value=$(this).val();
$(this).parents('li').each(function( index ) {
parents= $(this).data('level-name')+" > "+parents;
});
console.log(parents+" : "+current_value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1" data-level-name='Level 1'>
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>

I wrote up some example code as to how to do it. I would use relative selectors to accomplish this.
$("input[type=checkbox]").change(function () {
console.log($(this).closest(".lvl2").find("label").html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-3</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Try this .i was added code for 'leve1,level2' and label,input value.you could select as your wish
$('input:checkbox').click(function(){
console.log($(this).closest('.lvl1').text())
console.log($(this).closest('.lvl2').find('label').text())
console.log($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li class="lvl1">
<a>
<h4>Level-1</h4>
</a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1" />
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2" />
</li>
</ul>
</li>
</ul>
</li>
</ul>

How to align list in <section> tag?

I am fairly new to web development and there is still some issues I can resolve by myself.
I have this code:
HTML:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
</div>
and this CSS
ul , li {
list-style-type: none;
}
#column{
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
}
#colunmA{
}
#colunmB{
}
#colunmC{
}
I left rules #colunmA , #colunmB and #colunmC in CSS empty because I don't know what to put in here.
I would like to align all elements that belong to each column together. Also, elements in column C do not align horizontally and vertically with the others columns. I would like to achieve a similar result:
JS Fiddle here: https://jsfiddle.net/gdiop/s9w2ku8q/24/

You are placing your elements in little bit wrong way.
No need to make seperate rules for Column A,B,C. Always try to make general rules which can by applied to n-number of things.
Here is yout updated JSfiddle Demo
I added float and margin property to #column.
CODE:
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
<li class="en">list A6</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list b1</li>
<li class="en">list b2</li>
<li class="en">list b3</li>
<li class="en">list c5</li>
</ul>
</section>
</div>
</div>
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list c1</li>
<li class="en">list c2</li>
<li class="en">list c3</li>
</ul>
</section>
</div>
</div>
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
align-items: center;
line-height: 200%;
float:left;
margin-left:10px;
}
#colunmA {}
#colunmB {}
#colunmC {}

This is based on comments provided by me. note that the css is very simple and same class is applied to all columns A, B, C. i use class instead of id for simpler code:
ul , li {
list-style-type: none;
padding-left: 2px;
}
.columns {
display: block;
text-align: center;
margin: 0 auto;
}
.colunmItem { /* same class for columnA,B,C */
display: inline-block;
text-align: left;
vertical-align: top;
line-height: 300%; /* control line spacing for list items */
margin:0 5%;
}
<div class="columns">
<div class="colunmItem">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB" class="colunmItem">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunmC" class="colunmItem">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>
</div>

First remove from #column selector the align-items: center;
then u can add to each of your columns selector margin:0 20px;
for make a space between columns.
ul{
padding:0;
}
ul,
li {
list-style-type: none;
}
#column {
display: flex;
justify-content: center;
line-height: 200%;
}
#colunmA {
margin: 0 20px;
}
#colunmB {
margin: 0 20px;
}
#colunmC {
margin: 0 20px;
}
<div id="column">
<div id="colunmA">
<section>
<h1 class="en">Column A</h1>
<ul>
<li class="en">list A1</li>
<li class="en">list A2</li>
<li class="en">list A3</li>
<li class="en">list A4</li>
<li class="en">list A5</li>
</ul>
</section>
</div>
<div id="colunmB">
<section>
<h1 class="en">Column B</h1>
<ul>
<li class="en">list B1</li>
<li class="en">list B2</li>
<li class="en">list B3</li>
<li class="en">list B4</li>
<li class="en">list B5</li>
</ul>
</section>
</div>
<div id="colunm C">
<section>
<h1 class="en">Column C</h1>
<ul>
<li class="en">list C1</li>
<li class="en">list C2</li>
<li class="en">list C3</li>
</ul>
</section>
</div>

On check Child Checkbox checks Parent Checkbox

I managed to do on checking Parent Checkbox to check all Child Checkboxes but i dont know how to do on checking any child checkbox to check the parent checkbox and if all the child checkboxes are unchecked then the Parent checkbox needs to be unchecked.
1. I did on checking Parent Checkbox to check all Child Checkboxes (completed)
2. on checking any child checkbox also checks parent checkbox (not complete)
3. if all the child checkboxes are unchecked then the Parent checkbox unchecks(not complete).
This is how far i got:
$(function () {
$("input[type='checkbox']").change(function () {
$(this).siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li style="display: block;"><input type="checkbox">Lead1 <br>
<ul>
<li style="display: block;"><input type="checkbox"> All Leads <br></li>
<li style="display: block;"><input type="checkbox"> Recent Leads <br></li>
<li style="display: block;"><input type="checkbox"> My Leads <br></li>
</ul>
</li>
<li style="display: block;"><input type="checkbox">Lead2 <br>
<ul>
<li style="display: block;"><input type="checkbox"> first <br></li>
<li style="display: block;"><input type="checkbox"> second <br></li>
<li style="display: block;"><input type="checkbox"> third <br></li>
</ul>
</li>
Please Help me to solve this as i am new to jquery and js.

You can have another handler which will check whether any checkbox in the same level is checked if so check the parent checkbox
$(function() {
$("li:has(li) > input[type='checkbox']").change(function() {
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
});
$("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() {
$(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li style="display: block;">
<input type="checkbox">Lead1
<br>
<ul>
<li style="display: block;">
<input type="checkbox">All Leads
<br>
</li>
<li style="display: block;">
<input type="checkbox">Recent Leads
<br>
</li>
<li style="display: block;">
<input type="checkbox">My Leads
<br>
</li>
</ul>
</li>
<li style="display: block;">
<input type="checkbox">Lead2
<br>
<ul>
<li style="display: block;">
<input type="checkbox">first
<br>
</li>
<li style="display: block;">
<input type="checkbox">second
<br>
</li>
<li style="display: block;">
<input type="checkbox">third
<br>
</li>
</ul>
</li>
</ul>

Add a class parent to the parent li and then do it like following.
$("input[type='checkbox']").change(function () {
var ul = $(this).closest('ul');
var checked = ul.find('input[type="checkbox"]:checked').length > 0;
$(this).closest('.parent').find('input[type="checkbox"]').first().prop('checked', checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent" style="display: block;">
<input type="checkbox">Lead1 <br>
<ul>
<li style="display: block;"><input type="checkbox"> All Leads <br></li>
<li style="display: block;"><input type="checkbox"> Recent Leads <br></li>
<li style="display: block;"><input type="checkbox"> My Leads <br></li>
</ul>
</li>
<li class="parent" style="display: block;">
<input type="checkbox">Lead2 <br>
<ul>
<li style="display: block;"><input type="checkbox"> first <br></li>
<li style="display: block;"><input type="checkbox"> second <br></li>
<li style="display: block;"><input type="checkbox"> third <br></li>
</ul>
</li>

Add class to parent if all childeren have class

So I'm creating a progress bar, but I'm running into a little problem.
The rule I'm trying to implement:
for each li.page check if li.question = li.question.done, if true .addClass .done to this
So in the HTML below, #p1 should have class done, #p2 and #p3 shouldn't.
The current JS results in adding class .done to all .page li's in the page if one .page has all questions done.
Hope someone can help me get this to work, all help is appreciated!
This is the html:
<ul class="pages">
<li id="p1" class="page">
<ul class="questions">
<li id="q2" class="question done">1</li>
<li id="q3" class="question done">2</li>
<li id="q4" class="question done">3</li>
</ul>
</li>
<li id="p2" class="page">
<ul class="questions">
<li id="q5" class="question current">4</li>
</ul>
</li>
<li id="p3" class="page">
<ul class="questions">
<li id="q6" class="question done">5</li>
<li id="q7" class="question">6</li>
</ul>
</li>
</ul>
And this JS:
var doneCheck = function(){
$(".page").each(function () {
questionsInPage = $(this).closest(".questions").find("li").length;
questionsDone = $(this).closest(".questions").find("li.done").length;
var done = questionsDone == questionsInPage;
$(".page").each(function() {
if (done) {
$(this).parent().addClass('done');
};
});
});
}

For each page I would check the number of li against the number of elements with class question and done. If they match set page to done.
var doneCheck = function() {
$(".page").each(function() {
if($('.question.done', this).length==$('ul li',this).length)
$(this).addClass('done');
});
}
doneCheck();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
<li id="p1" class="page">
<ul class="questions">
<li id="q2" class="question done">1</li>
<li id="q3" class="question done">2</li>
<li id="q4" class="question done">3</li>
</ul>
</li>
<li id="p2" class="page">
<ul class="questions">
<li id="q5" class="question current">4</li>
</ul>
</li>
<li id="p3" class="page">
<ul class="questions">
<li id="q6" class="question done">5</li>
<li id="q7" class="question">6</li>
</ul>
</li>
</ul>

Instead of finding all the done questions, count the number of not done questions. If it's zero, all the questions are done. Use this to set the done property of the page.
function doneCheck() {
$(".page").each(function() {
var allDone = $(this).find(".questions li.question:not(.done)").length == 0;
$(this).toggleClass("done", allDone);
});
}
$("#check").click(doneCheck);
.page.done {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
<li id="p1" class="page">
<ul class="questions">
<li id="q2" class="question done">1</li>
<li id="q3" class="question done">2</li>
<li id="q4" class="question done">3</li>
</ul>
</li>
<li id="p2" class="page">
<ul class="questions">
<li id="q5" class="question current">4</li>
</ul>
</li>
<li id="p3" class="page">
<ul class="questions">
<li id="q6" class="question done">5</li>
<li id="q7" class="question">6</li>
</ul>
</li>
</ul>
<button id="check">Check</button>
FYI, you can't use == to compare the results of two selectors. If you want to test whether they're equivalent, use .is:
if (questionsDone.is(questionsInPage)
But your second loop is wrong, because it sets the class on all .page elements based on the done status of the current page of the loop.