how to get element class with condition children value determine? - javascript

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]);
}
});

Related

Javascript enable html when input checkbox checked

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 checkboxes

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 can i auto select children option when selected parent option Js, Jquery

I have structor like
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
What i need is i want choose level-0, it's will auto choose all lv-1 after it (child selection) and stop in lv-0 next.
How can i do it with JS or Jquery

I believe this is what you want. When a level-0 checkbox changes you want each of the following level-1 to change the same as the one you changed.
You traverse to the parent <li> and use nextUntil() to get the following group. Then change checked property of each of those checkboxes
$('.level-0 :checkbox').change(function(){
// from parent <li> get all siblings until next level-0
const $level_1 = $(this).closest('li.level-0').nextUntil('.level-0');
// set checked in them based on checked state of current one
$level_1.find(':checkbox').prop('checked', this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

jQuery's nextUntil might be able to help a bit with this:
$(function() {
$('.level-0').change(function () {
var status = $('input[type="checkbox"]', this).is(':checked');
var nextChks = $(this).nextUntil('.level-0');
if (nextChks && nextChks.length > 0) {
for (var i = 0; i < nextChks.length; i++) {
$('input[type="checkbox"]', nextChks[i]).attr('checked', status).prop('checked', status);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

you can do that
with a bonus on checked/unchecked level-1 action to resume level-0
const
allCats = document.querySelector('#choose-categories')
, LevCats = [...allCats.querySelectorAll('li')]
;
allCats.onclick = ({target}) =>
{
if (!target.matches('input[type=checkbox]')) return
let liParent = target.closest('li')
, liRef = LevCats.findIndex(x=>x===liParent)
;
if (liParent.classList.contains('level-0'))
{
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
LevCats[i].querySelector('input[type=checkbox]').checked = target.checked
else
break
}
else // if (liParent.classList.contains('level-1')) *** BONUS ***
{
while ( !LevCats[--liRef].classList.contains('level-0') ) {}
if (target.checked)
LevCats[liRef].querySelector('input[type=checkbox]').checked = true
else
{
checkedCount = 0
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
{ if (LevCats[i].querySelector('input[type=checkbox]').checked ) checkedCount++ }
else
break;
if (checkedCount === 0) LevCats[--liRef].querySelector('input[type=checkbox]').checked = false
}
}
}
li.level-1 span::before { content : '\2015\2015'; color:lightgrey; }
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
<span>Du Lịch</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
<span>Ẩm Thực</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
<span>Ẩm Thực Đường Phố</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
<span>Món Ngon</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
<span>Videos Giải Trí</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
<span>Làm Đẹp</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
<span>Nail</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
<span>Trang Điểm</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
<span>Làm Tóc</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
<span>Tattoo</span>
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

If you can/are allowed to change the html, you can make it to look like a tree, like the snippet below.. and what I did was
to add classes to each parent who has childrens and to each children itself (for the first group first-main-checkbox and first-sub-checkbox and for the second one with the second key word in class name)
get all elements with document.querySelectorAll(".first-sub-checkbox"); which return a NodeList (see querySelectorAll )
create a function who iterate through all elements returned by querySelectorAll and set the check state to true or false using a ternary operator
apply the function at click, which select/deselect checkbox: addEventListener("click", function) (see addEventListener)
I'm not saying that it's the best solution, but it's a start..
var firstMain = document.querySelector(".first-main-checkbox");
var firstChildrens = document.querySelectorAll(".first-sub-checkbox");
var secondMain = document.querySelector(".second-main-checkbox");
var secondChildrens = document.querySelectorAll(".second-sub-checkbox");
function toggleCheck(childrens) {
childrens.forEach(child => {
child.checked = child.checked == true ? false : true
})
}
firstMain.addEventListener("click", function() {
toggleCheck(firstChildrens)
});
secondMain.addEventListener("click", function() {
toggleCheck(secondChildrens)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">Du Lịch</label>
</li>
<li class="level-0">
<label><input class="first-main-checkbox" type="checkbox" name="selectItemallow[]" value="3">Ẩm Thực</label>
<ul>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="86">Ẩm Thực Đường Phố</label>
</li>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="87">Món Ngon</label>
</li>
</ul>
</li>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="9">Videos Giải Trí</label>
</li>
<li class="level-0">
<label><input class="second-main-checkbox" type="checkbox" name="selectItemallow[]" value="81">Làm Đẹp</label>
</li>
<ul>
<li class="level-1">
<label><input class="second-sub-checkbox"type="checkbox" name="selectItemallow[]" value="82"> Nail</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="83">Trang Điểm</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="84">Làm Tóc</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="85">Tattoo</label>
</li>
</ul>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">another lv 0 item</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

I am not sure but gonna try.
You have element inside of event parameter so get li from it by calling parent('li')
then find all siblings that are after it by calling next('li') and do loop like this
const nexts = [];
par.next('li').foreach(function (elem) {
if (elem.hasClass('level-0') && nexts.length > 0)
return false; // break loop
if (elem.hasClass('level-1'))
nexts.push(elem); // add li element
});
then just go through nexts and for each find its input which you marked as checked. That's it.

How to add remove a set of comma separated values in an input?

HTML
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">
I need to be able to add/remove tags in the input as per amici, bacio
I tried to use .map() but I'm not familiar with it or following this answer but I am not sure how to apply it to my case.

Hope this is what you're looking for:
$(document).ready(function() {
$('input:checkbox').on('change', function() {
var tags = $('input:checkbox:checked')
.map(function() {
return $(this).val();
}).get().join(', ');
$("#usp-tags").val(tags);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

Here is a way of retrieving the value using map.
Use :checked to get back the selected options:-
$('.wrap_temi [type="checkbox"]').change(function(){
var tags = $('.wrap_temi [type="checkbox"]:checked')
.toArray()
.map(x => x.value)
.join(', ');
$('#usp-tags').val(tags);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

jQuery UI sortable w/ list padding -- cannot drop over number

fiddle
html
<ol id="input-l8YFwLZvwNZ4" class="infinitext-lis">
<li>
<input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text">
<input type="hidden" name="answers[0][order]">
</li>
<li class="">
<input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text">
<input type="hidden" name="answers[1][order]">
</li>
...
</ol>
js
$('#input-l8YFwLZvwNZ4').sortable();
When you grab one of the list items by the number and drag it up or down over top of one of the other list numbers, they don't move and allow you to drop the list item there. You have to pick an item up, move your mouse to the right and drop it over one of the text boxes instead.
Is there a way to fix this?

Have a look at this fiddle : http://jsfiddle.net/k19o7adr/1/
There is some problem with ordered list with sortable, so i have changed it to ul tag and all is working fine now.
$('#input2').sortable();
<ul id="input2" class="infinitext-lis">
<li>1.
<input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[0][order]"/>
</li>
<li class="">2.
<input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[1][order]"/>
</li>
<li class="">3.
<input type="text" name="answers[4[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[4][order]"/>
</li>
<li>4.
<input type="text" name="answers[2[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[2][order]"/>
</li>
<li class="">5.
<input type="text" name="answers[5[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[5][order]"/>
</li>
<li>6.
<input type="text" name="answers[6[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[6][order]"/>
</li>
<li class="">7.
<input type="text" name="answers[3[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[3][order]"/>
</li>
<li class="">8.
<input type="text" name="answers[7[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[7][order]"/>
</li>
<li>9.
<input type="text" name="answers[8[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[8][order]"/>
</li>
</ul>

Categories

Resources