CODEWITHSUNDEEP
jquery
Creative Solution
Creative Solution

Reputation: 89

Addition with checkboxes

How can I to add the cost that is 190 + 150 from given code and displays on another div, let say div total?

I have already made a variable and stored the respective cost, my target is that when a user checked the checkbox (I have approx 10 checkboxes), the respective prices get added to the total and when unchecked it automatically substracts. Can anyone kindly give me a hint as to how to go about it. 

$(document).ready(function() {
    //var pdf=$('#result').html(" -PDF Document");

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked')
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        else
            $('#result').text("");
    });

    $('#2').click(function(){
        if (($(this).attr('checked')) == 'checked')
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        else
            $('#result2').text("");
    });
});

Upvotes: 3

Views: 136

Answers (4)

extramaster
extramaster

Reputation: 2655

Use the following code:

JS:

function refreshPrices() {
    var currentTotalValue = 0;
    $("#results div").each(function() {
        if (!isNaN(parseInt($(this).find("span").text().substring(1)))) {
            currentTotalValue += parseInt($(this).find("span").text().substring(1));
        }
    });
    $("#totalValue").text("$" + currentTotalValue)
}

To use it, store all your "result*" containers in a container, which will make the output easier to iterate through with jQuery [since only one major selector ("#results") is needed to grab the results in all of the "result*" containers].

<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

And whenever the user interacts with a checkbox, refreshPrices() should be called.

HTML:

<table>
<tr>
                        <td style="width: 13px">
                            <input id="1" type="checkbox" name="" onClick="" />

                        </td>
                        <td>
                            <h4>PDF Document</h4>
                            <p>
                                Already have your own menu or flyer? Include it in your App
                            </p>
                        </td>
                        <td class="cost" id="pdf-cost">£99.99 per document</td>
                    </tr>

                    <tr>
                        <td style="width: 13px">
                            <input id="2" type="checkbox"/>
                        </td>
                        <td>
                            <h4>Video</h4>
                            <p>
                                If you've already got videos on your website, these can be included within your App too.
                            </p>
                        </td>
                        <td class="cost">£149.99 per video</td>
</tr>
<table>
<br>
<br>
<div id="totalValu">Total Value: <span id="totalValue">$0</span></div>
<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

JS:

$(document).ready(function() {

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked') {
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        }
        else {
            $('#result').text("");
        }
        refreshPrices();
    });

    $('#2').click(function() {
        if (($(this).attr('checked')) == 'checked') {
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        }
        else {
            $('#result2').text("");
        }
        refreshPrices()
    });
});​

JSFiddle: http://jsfiddle.net/BA5rX/7/

Upvotes: 1

bipen
bipen

Reputation: 36531

have a look at this fiddle.. so that you can have some idea.... it does what i think you have asked for..

javascript

$("input:checkbox").change(function(){
  var $val=$(this).val();
  var total=$('#total').html();
  if($(this).is(':checked')){
    var finaltotal=parseInt($val) + parseInt(total)
  }else{
    var finaltotal=parseInt(total) - $val 
  }

      $('#total').html(finaltotal);
})

http://jsfiddle.net/5Azzr/1/

UPDATED

WITH YOUR EXAMPLE..

http://jsfiddle.net/BA5rX/4/

NOTE: i created a div with total value in it...

<div id="total">1000</div>

LATEST UPDATE

http://jsfiddle.net/5YZp5/2/

Upvotes: 3

mplungjan
mplungjan

Reputation: 177975

Here is my suggestion based on your html - I fixed your invalid IDs and added a class instead. Also I calculate onload as well in case the page is reloaded and the checkboxes are not cleared. I take the value from the table cell minus the leading pound char

DEMO

function calcTotal() {
  var total = 0;
  $(".check:checked").each(function() {
    total += parseFloat($(this).parent().siblings(".cost").text().substring(1));
  });            
  $("#totalDiv").html("£"+total.toFixed(2))

}

$(function() {
    calcTotal(); 
    $(".check").on("click",function() {
       calcTotal(); 
    });
});​

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

If you can amend your HTML so that you add a class to each checkbox and a data-price parameter which contains the price you can make your jQuery very simple like this:

$(".checkbox").change(function() {
    var total = 0;
    $(".checkbox:checked").each(function() {
        total += parseFloat($(this).data('price'));
    });
    $("#total").html(total.toFixed(2));
});

Example fiddle

Upvotes: 0

Related Questions