Hi, the sum of single selected item working but I have no idea how I can to connect the value of “Default price” (that I have used for demo) to “Total” for the rest of the calculations (Taxes and Discount)
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" class="tot_amount" value="10" id="filled-in-box1" onclick="chaked1();">
10</td>
</tr>
<tr>
<td><input type="checkbox" class="tot_amount" value="20" id="filled-in-box1" onclick="chaked1();">
20</td>
</tr>
<tr>
<td><input type="checkbox" class="tot_amount" value="30" id="filled-in-box1" onclick="chaked1();">
30</td>
</tr>
<tr>
</tr>
<tr>
<td>Total
<input type="text" id="cost" readonly>
</td>
</tr>
<tr>
<td width="98">Taxes</td>
<td width="115">Discount</td>
<td width="118">Default price</td>
</tr>
<tr>
<td><select class="select" name="taxes" onChange="updateInput()">
<option value="no" selected>no taxes</option>
<option value="19">19% taxes</option> <!-- <====================== -->
</select></td>
<td><select class="select" name="discount" onChange="updateInput()">
<option value="0" selected>0% discount</option>
<option value="5">5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select></td>
<td><input type="text" class="select" name="cost" id="cost" value="1000"></td>
</tr>
<tr>
<td>Price after discount</td>
<td>Taxes</td>
<td> </td>
</tr>
<tr>
<td><input type="text" name="price" value="0"></td>
<td><input type="text" name="ttaxes" value="0"></td> <!-- <====================== -->
</tr>
</table>
<script>
function chaked1(){
$("#filled-in-box1").click(function(event)
{
if(this.checked)
{
document.getElementById("one").value=document.getElementById("filled-in-box1").value;
document.getElementById('one').readOnly = false;
}
else
{
document.getElementById("one").value="0";
document.getElementById('one').readOnly = true;
}
});
}
</script>
<script>
function chaked2(){
$("#filled-in-box2").click(function(event)
{
if(this.checked)
{
document.getElementById("two").value=document.getElementById("filled-in-box2").value;
document.getElementById('two').readOnly = false;
}
else
{
document.getElementById("two").value="0";
document.getElementById('two').readOnly = true;
}
});
}
</script>
<script>
$(".tot_amount").click(function(event) {
var total = 0;
$(".tot_amount:checked").each(function()
{
total += parseInt($(this).val());
});
if (total == 0) {
$('#cost').val('');
}
else {
$('#cost').val(total);
}
});
function updateInput(){
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
var taxes = document.getElementsByName("taxes")[0].value; // <======================
if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
document.getElementsByName("ttaxes")[0].value = 0;
else { cost = document.getElementsByName("price")[0].value;
document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
}
}
</script>
</body>
</html>
this is the initial job http://jsfiddle.net/kY98p/295/
Not sure I understand the question properly.
You have a default price of 1000, when someone selects 5% discount what should happen?
When they select 19% tax after that, what should happen?
Should the default price be decreased (first to 950, then to 769.50)?
1 Like
Sorry but the right design of y project is this http://jsfiddle.net/kY98p/298/
I have 2 or more type of price, example “Type A” and “Type B”, I wish I could multiply the individual price for one or two or three times. Than I’d like to calculate the price possibly after discount or simply the total…thank you for your interest
Still not following 100%, I’m afraid.
Also, the code is a bit confused and has some duplication. If you’re interested in learning how to do this properly, I don’t mind helping you out.
Assuming you are, let’s remove the discount from the equation for a second. That will leave us with a dropdown displaying 1 unit - 4 unit, as well as checkboxes for type A and type B, each with a further dropdown next to them.
The checkboxes update the total field when selected. That works. but, two questions:
-
What should happen when I change the selection in the dropdown next to each select?
For example, if I select type A 10 and type A 20, total updates to 30. What should happen if I then change the dropdown next to Type A from 1 to 3? Should the total go to 50 (3x10 + 20)?
-
What is the purpose of the dropdown displaying 1 unit - 4 unit?
1 Like
Yes the code works only if you select the checkbox for the sum, this is an example https://i.imgsafe.org/d14573bb4b.gif
I have multiplied the price in Type A for 3 and the price in Type B for 3, the sum is (30+90) 120, then I have the discount for example 5% (or 10% or 15%) and the finale price is 114.
I hope it is clear, I have erase the dropdown 1unit-4 unit
Sorry but I don’t understand, can you help me out of here?
Ok, let’s look at how we might put this together in a slightly more semantic manner.
HTML: consider losing the tables for layout purposes, you can do all of that with CSS. Also be sure to use labels when working with form controls. This means clicking on the label’s value will toggle the check box.
<h1>TYPE A</h1>
<div class="container">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>
<input type="checkbox" value="10">10
</label>
</div>
<div class="container">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>
<input type="checkbox" value="20">20
</label>
</div>
<div class="container">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>
<input type="checkbox" value="30">30
</label>
</div>
<input id="total" placeholder="total" />
JS: what we want to do is to create a function updateTotal() and call this every time one of the check boxes or selects changes. Inside this function you can get the values of the check boxes which are checked and multiply them with the values of the respective selects.
function updateTotal(){
var total = 0;
$(".container input[type='checkbox']").each(function(){
if($(this).is(":checked")){
var multiplier = Number($(this).parent().prev().val());
var checkboxAmount = Number($(this).val());
total += multiplier * checkboxAmount;
}
});
$("#total").val(total);
}
$("select, input[type='checkbox']").on("change", updateTotal);
Here’s a demo. Can you please confirm that this works as you require and then we’ll move on to the discount.
1 Like
Thank you so much because the function code, but I need to have the tables, I have to adapt the code to this type of table ( http://tympanus.net/Tutorials/StickyTableHeaders/index3.html ), the data that will insert will be roughly the same as in the link, and I have to set overflow on the horizontal x axis.
how can I continue the project?
Fair enough, using your markup, that’d be:
function updateTotal(){
var total = 0;
$("table input[type='checkbox']").each(function(){
if($(this).is(":checked")){
var multiplier = Number($(this).parent().prev().val());
var checkboxAmount = Number($(this).val());
total += multiplier * checkboxAmount;
}
});
$("#cost").val(total);
}
$("select, input[type='checkbox']").on("change", updateTotal);
Here’s a new demo.
Does that work as desired?
1 Like
Yes man, It is what I need 
I have only a question about the dropdown quantity that we use for multiply, can it be inserted only once in the row? For example, I could add it in the first cell and multiply the price value “type A” or “type B” or “C” etc… this for a better graphics…thanks again for the help!!
Sorry, don’t quite follow. Could you make another graphic like you did previously?
1 Like
Hi and thank you, this is my final project:
https://s15.postimg.org/5jsrndyvf/totw.jpg
Ok, here’s a new demo.
Can you confirm that this works as expected. If so, we’ll move on to calculating the discount after that.
1 Like
Yes my friend it is exactly what I need…you are amazing!!! 
It remains only the calculation of the discount…thank you very much!!!
Should the discount be a percentage of the total then? It seems to be adjustable in the shot you posted above.
1 Like
Yes the possibility to calculate a different discount (example 20% - 30% - 50%) of the total
Ok, well as we have our update function attached to the selects, too, implementing that should be simple.
Try this and let me know if it works, so I can update the thread with the completed solution.
1 Like
Yes, it is perfect!!! Thank you Pullo !!!
Glad to hear it
Final version:
<table>
<thead>
<tr>
<th></th>
<th>Type A</th>
<th>Type B</th>
<th>Type C</th>
<th>Type D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<label>
<input type="checkbox" value="10" /> 10
</label>
</td>
<td>
<label>
<input type="checkbox" value="10" /> 10
</label>
</td>
<td>
<label>
<input type="checkbox" value="10" /> 10
</label>
</td>
<td>
<label>
<input type="checkbox" value="10" /> 10
</label>
</td>
</tr>
<tr>
<td>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<label>
<input type="checkbox" value="20" /> 20
</label>
</td>
<td>
<label>
<input type="checkbox" value="20" /> 20
</label>
</td>
<td>
<label>
<input type="checkbox" value="20" /> 20
</label>
</td>
<td>
<label>
<input type="checkbox" value="20" /> 20
</label>
</td>
</tr>
<tr>
<td>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<label>
<input type="checkbox" value="30" /> 30
</label>
</td>
<td>
<label>
<input type="checkbox" value="30" /> 30
</label>
</td>
<td>
<label>
<input type="checkbox" value="30" /> 30
</label>
</td>
<td>
<label>
<input type="checkbox" value="30" /> 30
</label>
</td>
</tr>
<tr>
<td colspan="5">Total:
<input id="cost"
readonly="readonly"
placeholder="Total"
type="text" />
</td>
</tr>
<tr>
<td colspan="5">Discount:
<select id="discount">
<option value="1">0%</option>
<option value="0.8">20%</option>
<option value="0.7">30%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">Price after Discount:
<input id="price-after-discount"
readonly="readonly"
placeholder="Total"
type="text" />
</td>
</tr>
</tbody>
</table>
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
function updateTotal() {
var total = 0;
$("table input[type='checkbox']").each(function() {
if ($(this).is(":checked")) {
var multiplier = Number($(this).closest("tr").find("select").val());
var checkboxAmount = Number($(this).val());
total += multiplier * checkboxAmount;
}
});
var discount = total * Number($("#discount").val());
$("#cost").val(total);
$("#price-after-discount").val(discount);
}
$("select, input[type='checkbox']").on("change", updateTotal);
1 Like
Is there a way to apply the same value to the checkboxes of the cell automatically without rewriting it?
I am copying the values of the cells from an Excel file, and I would understand if there is a method of applying the checkbox automatically. What would be the best method considering I tables with thousands of data? Thank you in advance
https://s11.postimg.org/yzg2ssdtf/Schermata_2016_10_05_alle_18_00_40.png
So you want a script which would dynamically copy the value of the checkbox cell, to its value attribute.
So:
<td><input type="checkbox">32</td>
would become:
<td><input type="checkbox" value="32">32</td>
Did I get that right?
1 Like
