Use multiple checkbox values calculations on the same page

Use multiple checkbox values calculations on the same page - javascript

<script type="text/javascript">
var total = 0;
function test(item){
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + " ";
document.getElementById('Totalcost2').innerHTML = total + " ";
document.getElementById('Totalcost3').innerHTML = total + " ";
}
</script>
</head>
<body>
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost2"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost3"> </span><br />
</html>
My question is how to set it to show 3 different sums on the same page without conflicts, about conflicts I mean if I set 3 times the id="Totalcost" on the same page it should show them differently but they show the same, i tried to set 3 different id's id=Totalcost, Totalcost2 and Totalcost3 for example but it doesn't work it goes in conflict.

If I understand you well, because I'm not sure :
You can't attribute same ID to multiple elements.
You have to do something like this :
function test(){
var checklist = document.getElementById('modulo')
.getElementsByClassName('checklist');
for (var i = 0 ; i < checklist.length ; i++) {
var checkboxes = checklist[i].querySelectorAll('input[type=checkbox]'),
sum = 0;
for (var j = 0 ; j < checkboxes.length ; j++) {
if (checkboxes[j].checked) {
sum += Number(checkboxes[j].value)
}
}
checklist[i].getElementsByClassName('totalcost')[0].innerHTML = sum + " ";
}
}
document.getElementById('modulo').addEventListener('change',test,false)
And in BODY :
<form id="modulo">
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span><br /><br />
</div>
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span>
</div>
</form>

Related

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.

You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

How to Checked a checkbox when there is a certain value in the text field

I have a textfield which contains certain value:
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
this is the input checkbox
<input type="checkbox" name="user_id[] value="61" />
<input type="checkbox" name="user_id[] value="62" />
<input type="checkbox" name="user_id[] value="63" />
*note i run this checkbox in php thats why it contains the [] for array.
I want the checkbox to checked if there is a value of 61 inside the textfield. I want it to be dynamic because it is from database, because value can be change and it is not fixed. How do i do this?
thanks in advance

You can try something like this
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
plain javascript
let ids = document.querySelector("#studID").value.split(',');
ids.forEach(function(id) {
var checkbox = document.querySelector("input[name='user_id[]'][value='"+id+"']");
if(checkbox) {
checkbox.checked = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />

You have to iterate over the inputs and then check the condition:
document.querySelectorAll("input").forEach(function(i) {
if (i.value.indexOf("61") > -1) {
i.checked = true;
}
});
<input type="checkbox" name="user_id[]" value=" 61 " />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value=" 63" />

Add a change listener to the text field. It should loop through the checkboxes, either checking or unchecking them depending on whether their values match the input.
document.querySelector("#studID").addEventListener("change", function() {
var values = this.value.split(",");
var checkboxes = document.querySelectorAll(`input[name='user_id[]']`);
checkboxes.forEach(cb => cb.checked = values.includes(cb.value));
});
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64" />
<br>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />

How to check 0 to nth index checkbox in using jquery

I have checkboxes which I want to check and uncheck by using button
for example suppose I want check checkbox 0 to 9 should be checked then I click on "10 or less" button so other checkbox must uncheck and only that check box checked which index less has than 10
Button
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button>
Checkbox
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
...
...
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />
I have used loop for this but may be there is any better way please let me know.
Thanks in advance

You'll want to use the .slice(n, n+1) to slice out the checkboxes you want. Please see the following question that shares a lot of similarity with yours:
Selecting the first "n" items with jQuery

Use jquery filter function to filter out the checkbox indices like this (assuming nth checkbox has value n as in the question):
$('input[type=checkbox]').filter(function() {
return $(this).val() >= min && $(this).val() <= max;
}).prop('checked', true);
See demo below:
$('button').click(function() {
let min = +$(this).attr('class').replace(/-\d+$/, '');
let max = +$(this).attr('class').replace(/^\d+-/, '');
// uncheck all
$('input[type=checkbox]').prop('checked', false);
// check the ones required
$('input[type=checkbox]').filter(function() {
return $(this).val() >= min && $(this).val() <= max;
}).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button> Checkbox
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
<input type="checkbox" name="age[]" class="age_opts" value="22" /> 22 <br />
<input type="checkbox" name="age[]" class="age_opts" value="23" /> 23 <br />
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />

You can filter the relevant element and set their checked property:
$(function() {
$('.1-10').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 10).prop('checked', true);
});
$('.1-25').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 25).prop('checked', true);
});
$('.1-50').click(function() {
$('.age_opts').prop('checked', false);
$('.age_opts').filter((i) => i < 50).prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button>
<br />
<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
<input type="checkbox" name="age[]" class="age_opts" value="4" /> 4 <br />
<input type="checkbox" name="age[]" class="age_opts" value="5" /> 5 <br />
<input type="checkbox" name="age[]" class="age_opts" value="6" /> 6 <br />
<input type="checkbox" name="age[]" class="age_opts" value="7" /> 7 <br />
<input type="checkbox" name="age[]" class="age_opts" value="8" /> 8 <br />
<input type="checkbox" name="age[]" class="age_opts" value="9" /> 9 <br />
<input type="checkbox" name="age[]" class="age_opts" value="10" /> 10 <br />
...<br />
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />

Checkbox value showing using JavaScript

I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>

Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />

$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />

You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>

function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox

First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>

Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>

Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>

In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.

Calculate total on checkbox checked

HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..

Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE

$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

Develop Reference

JavaScript is the programming language of the Web.

Use multiple checkbox values calculations on the same page - javascript

Related

Show only Checked Options using Jquery

How to Checked a checkbox when there is a certain value in the text field

How to check 0 to nth index checkbox in using jquery

Checkbox value showing using JavaScript

Calculate total on checkbox checked

Categories

Resources