I want to addClass my span.toggle if parent of li has no ul element inside.
click to see on codepen
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<ul>
<li>
<span class="toggle"></span><input type="checkbox" name="" id="0"><label for="0">Main 1</label>
<ul>
<span class="toggle"></span> <li><input type="checkbox" name="" id="0-1"><label for="0-1">Child 1</label></li>
<span class="toggle"></span><li><input type="checkbox" name="" id="0-2"><label for="0-2">Child 2</label>
<ul>
<span class="toggle"></span> <li><input type="checkbox" name="" id="0-1-1"><label for="0-1-1">Sub Child 1</label></li>
<span class="toggle"></span><li><input type="checkbox" name="" id="0-1-2"><label for="0-1-2">Sub Child 2</label></li>
</ul>
</li>
<span class="toggle"></span> <li><input type="checkbox" name="" id="0-3"><label for="0-3">Child 3</label></li>
<span class="toggle"></span> <li><input type="checkbox" name="" id="0-4"><label for="0-4">Child 4</label></li>
</ul>
</li>
<li>
<span class="toggle"></span> <input type="checkbox" name="" id="1"><label for="1">Main 2</label>
</li>
<li>
<span class="toggle"></span> <input type="checkbox" name="" id="2"><label for="2">Main 2</label>
<ul>
<li>
<span class="toggle"></span> <input type="checkbox" name="" id="2-1"><label for="2-1">Child 1</label>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
CSS:
ul{
list-style: none;
padding:0;
margin: 0;
margin-left:20px;
font:13px calibri;
}
input[type="checkbox"]{
vertical-align:middle;
}
span.toggle{
float:left;
display:block;
background:url("https://cdn3.iconfinder.com/data/icons/fatcow/16/bullet_toggle_plus.png") no-repeat 0px 1px;
width:16px;
height:16px;
}
ul> * ul {
display:none;
}
input[type="checkbox"]:checked ~ ul{
display:block;
}
jQuery:
$(function(){
$("ul li").children("ul").each(function(){
$(this).find("li").addClass("parentUl");
});
});
$('ul > li').each(function(i,t){
var t = $(t);
if(! t.children('ul').length){
t.children('span').addClass('add-class');
}
});
Check out Get all elements without child node in jQuery
$('li'):not(:has(*)).addClass('classy');
Related
const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownLists = document.querySelectorAll('.dropdown-list');
dropdownBtns.forEach(function(dropdownBtn) {
dropdownBtn.addEventListener('click', function() {
dropdownLists.forEach(function(dropdownList) {
if (dropdownList !== this.nextElementSibling) {
dropdownList.style.display = 'none';
}
});
this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'block' ? 'none' : 'block';
});
});
.container {
display: flex;
gap: 50px;
}
.dropdown-list {
display: none;
}
<div class="container">
<div class="dropdown">
<button class="dropdown-btn">Dropdown 1</button>
<ul class="dropdown-list">
<li><input type="checkbox" id="item-1"> <label for="item-1">Item 1</label></li>
<li><input type="checkbox" id="item-2"> <label for="item-2">Item 2</label></li>
<li><input type="checkbox" id="item-3"> <label for="item-3">Item 3</label></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown-btn">Dropdown 2</button>
<ul class="dropdown-list">
<li><input type="checkbox" id="item-4"> <label for="item-4">Item 4</label></li>
<li><input type="checkbox" id="item-5"> <label for="item-5">Item 5</label></li>
<li><input type="checkbox" id="item-6"> <label for="item-6">Item 6</label></li>
</ul>
</div>
</div>
Having a list of dropdowns I'd like to close other dropdown list if one is clicked and close itself if its already open. First part is working however button isn't closing the currently open dropdown list.
Target instead your parent .dropdown wrappers, toggle a class like is-active, style in CSS accordingly.
Use Element.classList and the respective .toggle() and .remove() prototype methods:
const elsDD = document.querySelectorAll('.dropdown')
elsDD.forEach(elDD => {
elDD.querySelector(".dropdown-btn").addEventListener("click", () => {
elsDD.forEach(el => {
el.classList[el === elDD ? "toggle" : "remove"]("is-active");
});
});
});
.container {
display: flex;
gap: 50px;
}
.dropdown .dropdown-list {
display: none;
}
.dropdown.is-active .dropdown-list {
display: initial;
}
<div class="container">
<div class="dropdown">
<button class="dropdown-btn">Dropdown 1</button>
<ul class="dropdown-list">
<li><label><input type="checkbox" name="c1" value="1">Item 1</label></li>
<li><label><input type="checkbox" name="c1" value="2">Item 2</label></li>
<li><label><input type="checkbox" name="c1" value="3">Item 3</label></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown-btn">Dropdown 2</button>
<ul class="dropdown-list">
<li><label><input type="checkbox" name="c2" value="4"> Item 4</label></li>
<li><label><input type="checkbox" name="c2" value="5"> Item 5</label></li>
<li><label><input type="checkbox" name="c2" value="6"> Item 6</label></li>
</ul>
</div>
</div>
The above solution is pretty slick since you can style as "active" not only the .dropdown wrapper, but also any child element by just descending from the parent: .dropdown.is-active .dropdown-btn { background: gold; }. You get the point.
What should be the condition for: If i click the check box then the items for that particular brand is triggered?
Here I want to print the values for the item selected
The current code is showing Cannot read properties of null (reading 'addEventListener')
let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
if (filterBrand.value == "Amana") {
document.querySelector(".item-list").innerHTML = "";
for (let i = 0; i < productData.length; i++) {
console.log("hello");
}
}
});
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
You can retrieve all checked checkboxes within ul#filter-brands using the css-selector #filter-brands input[type='checkbox']:checked. For example:
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`)) {
console.clear();
const selected = [];
// all checked checkboxes
document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
.forEach( cb => /* here you can insert code to display stuff */
selected.push(cb.id) );
console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
}
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
A more specific approach (handler per checkbox):
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
const selected = evt.target.checked;
return document.querySelector(`[data-selector='${evt.target.id}']`)
.classList[evt.target.checked ? `add` : `remove`](`selected`);
}
}
ul {
display: inline-block;
max-width: 50vw;
}
ul#filter-brands {
float: left;
}
#brand-lists li {
display: none;
}
#brand-lists li.selected {
display: revert;
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
<ul id="brand-lists">
<li data-selector="Amana">Amana list</li>
<li data-selector="Frigidaire">Frigidaire list</li>
<li data-selector="GE">GE list</li>
<li data-selector="Insignia">Insignia list
<li data-selector="LG">LG list</li>
<li data-selector="Samsung">Samsung list</li>
<li data-selector="Whirlpool">Whirlpool list</li>
</ul>
Select odd check boxes please help me with the code
for(let i=0;i<8;i++){
if(i%2==1){
document.querySelector(“ul.todo-list > li:nth-child(i) input.toggle”).click()
}
}
You can use the li:nth-child(odd) then set the checked attribute to true for those selected checkboxes.
This is an example:
let elements = document.querySelectorAll('ul.todo-list > li:nth-child(odd) input[type="checkbox"]');
for(var i=0;i<elements.length;i++){
elements[i].checked = true;
}
<ul class="todo-list">
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
</ul>
How to change the style of checkboxes when clicking on one of the list , inactive change the style ? When you click the checkbox, the sf-option-active class is issued. How can css be changed by others ?
Initially, all the elements are highlighted, when you click on one checkbox others are dimmed
<ul data-operator="or" class="list">
<li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
<label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label></li>
<li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="konveiri" name="_sft_tip[]" checked="checked" id="sf-input-868176859db7cbdd316babead1c4a6ca"><label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label></li>
<li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa"><label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label></li>
<li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1"><label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label></li>
</ul>
1:
2:
Problem with radio buttons is you cannot remove selection. If you do not want to use radio buttons, you can use this small jquery snippet here with checkboxes.
$(".sf-input-checkbox").on("click", (e) => {
if(e.target.checked) {
$(".sf-input-checkbox").not($(e.target)).prop('checked', false);;
$(".sf-label-checkbox").not($(e.target).next()).addClass("dimmed");
$(e.target).next().removeClass("dimmed");
} else {
$(".sf-label-checkbox").removeClass("dimmed");
}
});
.dimmed {
color: lightgray;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-operator="or" class="list">
<li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0">
<input class="sf-input-checkbox hidden" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
<label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label>
</li>
<li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0">
<input class="sf-input-checkbox hidden" type="checkbox" value="konveiri" name="_sft_tip[]" id="sf-input-868176859db7cbdd316babead1c4a6ca">
<label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label>
</li>
<li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0">
<input class="sf-input-checkbox hidden" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa">
<label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label>
</li>
<li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0">
<input class="sf-input-checkbox hidden" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1">
<label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label>
</li>
</ul>
You don't need any JS for this. Instead you can just say in CSS:
For every label who are AFTER a checkbox: put it gray (.moo + span)
For every label who are AFTER a CHECKED checkbox: put it black (.moo:checked + span)
.moo + span {
color: #AAA;
}
.moo:checked + span {
color: #000;
}
<input type='radio' name="moo" class="moo"><span>1111</span><br/>
<input type='radio' name="moo" class="moo"><span>2222</span><br/>
<input type='radio' name="moo" class="moo"><span>3333</span><br/>
<input type='radio' name="moo" class="moo"><span>4444</span>
With a little more code you can link the label to the checkbox and (why not) hiding the checkbox:
.moo {
visibility: hidden;
}
.moo + label {
color: #AAA;
cursor: pointer;
}
.moo:checked + label {
color: #000;
}
<div>
<input type='radio' name="moo" id="c1" class="moo">
<label for="c1">1111</label>
</div>
<div>
<input type='radio' name="moo" id="c2" class="moo">
<label for="c2">2222</label>
</div>
<div>
<input type='radio' name="moo" id="c3" class="moo">
<label for="c3">3333</label>
</div>
<div>
<input type='radio' name="moo" id="c4" class="moo">
<label for="c4">4444</label>
</div>
UPDATED with radio instead of checkbox
Updated
i has code ex:
<ul>
<li class="menu-0">
<input class="id" type="text" value="1"/>
</li>
<li class="menu-0">
<input class="id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="id" type="text" value="3"/>
</li>
</ul>
so i want addClass parent-0 to li with condition this li children input class id val() = this li next() children input class parent_id val().
it like
<ul>
<li class="menu-0">
<input class="id" type="text" value="1"/>
</li>
<li class="menu-0 parent-0">
<input class="id" type="text" value="2"/>
</li>
<li class="menu-0 children-parent-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0 children-parent-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0 ">
<input class="id" type="text" value="3"/>
</li>
</ul>
how to made it. thanks :]
Try this code:
$('.menu-0').each(function(){
if($(this).children('input').val() == '2')
{
$(this).addClass('parent-0');
}
});
Or more generic:
$('li').each(function(){
var num = $(this).attr('class').split('-').reverse();
if($(this).children('input').val() == '2')
{
$(this).addClass('parent-'+num[0]);
}
});