Loop multiple check boxes in javascript addition - javascript

I have a simple checkbox calculator, that pretty much adds the items that are checked. How can I seperate the totalPrice. My issue is that it doesn't display in the right place when food items are selected.
Is there a way to display the price in the right spot according to which items are ticked.. For example items from technology should display in the totalPrice for that fieldset, and items checked from foods should display in the totalPrice for that fieldset. I struggle to make the code as intuitive as possible, any help or tips will be appreciated.
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>

Ok, so first of all you've used an id twice, that causess some issues, also you'll need seperate functions for both forms.
Here's the new code:
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
function priceAddition2() {
var input = document.getElementsByName("option2");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition2();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice2">$0.00</p>
</div>
</fieldset>
</div>
</form>

Related

Condition with Input field number = checkbox able to select how?

Hi i would like some help where i have created a input field for number 1 - 7 where if number 1 mean i can only select 1 checkbox but if number 7 are choosen is it able to select 7 checkbox how can i do it ?
Here my code
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>
You can use eventListeners to check if the number of checkboxes checked is bigger than the value of the number input :
$("input[type='checkbox']").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$(this).prop("checked", false); //cancels the check
}
});
$("input[type='number'].inputStyle").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$("input[type='checkbox']:checked").prop("checked", false); //uncheck all checked checkboxes
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>

How to document.querySelectorAll() only checked items

I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you
Return just the checked items.
form.querySelectorAll("input:checked")
const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');

Limit Number Multiple Checkboxes in JS

I have multiple checkboxes with limits but it doesn't work with JS like this
$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().data("limit"));
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
alert("The limit is " + limit)
}
});
and for html like this:
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="1">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="2">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="3">
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="4">
</label>
</div>
</div>
This code not working,
Any suggestions would be gratefully receive!
You have to change your script to this -
$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));
console.log($('input.checkbox-limit:checked').length);
if($('input.checkbox-limit:checked').length > limit) {
this.checked = false;
alert("The limit is " + limit);
}
});
$(".checkbox-limit").on('change', function(evt) {
var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));
console.log($('input.checkbox-limit:checked').length);
if($('input.checkbox-limit:checked').length > limit) {
this.checked = false;
alert("The limit is " + limit);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="1">1
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="2">2
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="3">3
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="4">4
</label>
</div>
</div>
<br>
<br>
<div class="row js_check_two" data-limit="2">
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="7">7
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="8">8
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="9">9
</label>
</div>
<div class="col-md-12">
<label>
<input type="checkbox" class="checkbox-limit" value="10">10
</label>
</div>
</div>
I used that but effect for global

jquery remove parent of parent cur.element

hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }

Add values from checkbox and radio to a label using JS or Jquery

I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000~')
$('#totalLine').text((Math.round(100000 * 1.08)) + '~') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000~')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '~')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>

Categories