Question

jq question again, i’ve 4 form in one page and a script for calc. their total,

how can i calc different total amount with the < form id=”#” > things ?

Thanks

<script type="text/javascript"> 
    $(document).ready(function() {
        var total = 0;
        function calcTotal() {
            $("input:checked").each(function() {
            var value = $(this).attr("value");
            total += parseInt(value); 
            });
        }

    //This happens when the page loads
    calcTotal();    
    $("h2").after('<p class="total">Total： <strong>¥' + total + '</strong></p>');
    $("input:checkbox, input:radio").click(function()
    {
        total = 0;
        calcTotal();
        $("p.total").hide().html("Total： <strong>¥" + total + "</strong>").fadeIn('slow');
    });
});
</script>

Answer 1

Give each form a different id (e.g. ) and then modify you selector to include the form’s ID:

$('#form1 input:checked').each(function() {

UPDATE: You could definitely accomplish this by scoping with an id on each form, but another way is using scoped selectors. (I’m assuming that your <h2> is contained within the form.)

$("h2").after('<p class="total">Total： <strong>¥0</strong></p>');
$("input:checkbox, input:radio").click(function() {
    var total = 0;
    var scope = $(this).parent('form');
    $("input:checked", scope).each(function() {
        var value = $(this).attr("value");
        total += parseInt(value, 10);
    });
    $("p.total", scope).hide().html("Total： <strong>¥" + total + "</strong>").fadeIn('slow');
});

You can see this in action at http://jsfiddle.net/7NGHq/.