We Keep Coding

how to access multiple class of child tags and the child tags themselves of a parent element in html using javascript?

I am creating a page where the user checks the checkbox of the dish name and set the quantity of orders they want for that particular dish. I want to give it a logic where it increments the quantity of a dish only when that particular dish is checked.
To do this all I can think of is to use the child elements of the ul element in the form section. I want to write a function in js that first checks if the checkbox of a particular li element is checked or not. If checked then only will it increase the quantity on the button pressed. But I can't figure out how to do so.
This is my HTML code.
<form>
<ul id = 'food_tracker'>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-" value="Tandoori Chicken"/>
<label for="food-item-one">Tandoori Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p id="value">1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$150</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-two" value="Schezwan Chicken"/>
<label for="food-item-two">Schezwan Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$329</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-three" value="Chicken Lollypop"/>
<label for="food-item-three"> Chicken Lollypop</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$229</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-four" value="Russian Chicken"/>
<label for="food-item-four">Russian Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p>$157</p>
</div>
</li>
<li class="item-block">
<div class="food_box">
<input type="checkbox" class="cb" name="Food-item" id="food-item-five" value="Afghani Chicken"/>
<label for="food-item-five">Afghani Chicken</label>
</div>
<div class="quantity">
<span class="decrease">-</span>
<p>1</p>
<span class="increase">+</span>
</div>
<div class="pricing">
<p value="149">$149</p>
</div>
</li>
</ul>
</form
In the javascript section, I am trying to use conditionals that if the checkbox of a particular element is checked only then can the quantity increase or decrease.
This is the link to the page
Online_Order_Page
Please correct me on where and what am I doing wrong.
I also want to create a function which will increase/decrease the pricing as the quantity for that particular dish increases/decreases.
Some tips on this will be appreciated as well.

Couple of things:
At the end of the js code, you loop through the items, and only attach an event listener to the buttons, if they are checked (by default, none of them are checked, so no event listeners are registered).
You try to attach an eventlistener to the increment/decrement buttons, but that's a NodeList of the buttons, not a single button.
You only have 1 count variable, and all the buttons are changing it. You need to keep count of each individual item's count.
A tip: Try to store your data in a different data structure. For example in an array of objects:
let items = [
{
id: 1,
name: 'Tandoori Chicken',
count: 1
checked: false,
},
{
id: 2,
name: 'Schezwan Chicken',
count: 1
checked: false,
},
...
];
You don't have to hard code them one-by-one, you can loop through the html items, get the names, the ids and the count and checked are always 1 and false by default.
While looping through them, you can attach an event listener to the checkbox, that sets the object's checked attribute to true/false, and the increment/decrement changes the count of the given object.
You will also be able to replace the shown amount within the event listener.

CSS not selector not working [duplicate]

This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 6 years ago.
I'm trying to select all inputs except the inputs inside some div.class. I do not know why it does not work correctly. My structure looks something like below. And why selector :not not work. And what can I do to exclude all inputs from the "exclude" div. Because i want only select inputs: i1,i2.
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>

$('input').not('.exclude *')
or
$('input:not(.exclude *)')
These will grab all inputs which are not descendants of elements with the exclude class. You can get more specific on which inputs (maybe only the ones under a certain div or class) but this should get you the exclusion you're looking for.
You can see a working example here

In your HTML structure:
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
each <input> is inside at least one <div> that does not have the class "exclude". Therefore your selector is working but it's not getting the result you want.
Instead, qualify the inputs selected the simple way:
console.log($("div input:not(.exclude *)").length);)
That selector will first select all of the <input> elements (well the ones inside <div> elements), but then exclude all of <input> elements that have an element with class "exclude" somewhere above them in the DOM.
If the original qualifier of being inside some <div> isn't really important, then all you need is "input:not(.exclude *)".

I marked inside your HTML the div that is not with the exclude class, and this is why you got 4 inputs on your console.log($("div:not(.exclude) input").length);
You can filter out the inputs that have parents with the exclude class:
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
console.log($("input").filter(function() { return $(this).parents('.exclude').length > 0}).length);
$("input").filter(function() { return $(this).parents('.exclude').length > 0}).css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div> <!-- This div is not with the class explude -->
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>

Take this:
console.log($("div.table.exclude input").length);
console.log($("div.table:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1" class="table">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="table exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>

Problem: there are inner divs which does not have the class and they satisfy the selector too.
Solution: Add another class to the divs which you want to be part of your selector and then use this new class too .. Like
<div id="tab1" class="tabs"> And
<div id="tab2" class="tabs exclude">
And then change script to
$("div.tabs:not(.exclude) input")

Not being able to pre-select desired radio box by default

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>

It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)

The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?

Wrap children elements of parent elements without class only if they contain text inputs

Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>

You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.

Javascript function only works once. Any idea why?

HTML
I am trying to create a todolist application. I wanted to make each task list to be removed with faded transition. I achieved it already but the problem with my code is that it only hide the first div area.
<div id="task">
<input type="checkbox" id="completed">
<h2>Buy some fruits</h2>
</div>
<div id="task">
<input type="checkbox" id="completed">
<h2>Buy some fruits</h2>
</div>
JQuery
$("#completed").change(function(){$("#item").fadeToggle("fast", "linear")});

Dont use mutipple id's on same page use class instead
<div class="task">
<input type="checkbox" class="completed">
<h2>Buy some fruits</h2>
</div>
<div class="task">
<input type="checkbox" class="completed">
<h2>Buy some fruits</h2>
</div>
$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")});
// same apply to your #item

You should not have multiple elements with the same id. The whole point of this attribute is to uniquely identify an element.
Replace it with something like:
<input type="checkbox" class="completed">
And your javascript accordingly:
$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")});
This should sort your problem out.

Try this:
<div>
<input type="checkbox" class="checkbox">
<h2>Buy some fruits</h2>
</div>
<div>
<input type="checkbox" class="checkbox">
<h2>Buy some fruits</h2>
</div>
<script type="text/javascript">
$(".checkbox").change(function(){$(this).parent().fadeToggle("fast", "linear")});
</script>
OR
<div>
<input type="checkbox">
<h2>Buy some fruits</h2>
</div>
<div>
<input type="checkbox">
<h2>Buy some fruits</h2>
</div>
<script type="text/javascript">
$("input[type=checkbox]").change(function(){$(this).parent().fadeToggle("fast", "linear")});
</script>

id of both input elements are same.
you can use class instead of id.
like below
$(".completed").change(function(){ } $(this).hide();});
pls modify this code as per u r