mardi 15 décembre 2015

Calculating multiple checkbox values

I need help for calculate each checkbox values in independent tables.

First example table:

<table id="847391201">
    <tr>
        <td><input type="checkbox" name="option1" value="49.90" onClick="calculate(this, 847391201);"></td>
        <td style="text-align: left;">Option 1</td>
        <td style="text-align: right;">49.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option2" value="39.90" onClick="calculate(this, 847391201);"></td>
        <td style="text-align: left;">Option 2</td>
        <td style="text-align: right;">39.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option3" value="29.90" onClick="calculate(this, 847391201);"></td>
        <td style="text-align: left;">Option 3</td>
        <td style="text-align: right;">29.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option4" value="19.90" onClick="calculate(this, 847391201);"></td>
        <td style="text-align: left;">Option 4</td>
        <td style="text-align: right;">19.90 $</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: right;">Total: <span id="total_847391201">0.00 $</span></td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center;"><a href="#" class="button orange">Make Payment</a></td>
    </tr>
</table>

Second example table:

<table id="847391202">
    <tr>
        <td><input type="checkbox" name="option1" value="49.90" onClick="calculate(this, 847391202);"></td>
        <td style="text-align: left;">Option 1</td>
        <td style="text-align: right;">49.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option2" value="39.90" onClick="calculate(this, 847391202);"></td>
        <td style="text-align: left;">Option 2</td>
        <td style="text-align: right;">39.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option3" value="29.90" onClick="calculate(this, 847391202);"></td>
        <td style="text-align: left;">Option 3</td>
        <td style="text-align: right;">29.90 $</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option4" value="19.90" onClick="calculate(this, 847391202);"></td>
        <td style="text-align: left;">Option 4</td>
        <td style="text-align: right;">19.90 $</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: right;">Total: <span id="total_847391202">0.00 $</span></td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center;"><a href="#" class="button orange">Make Payment</a></td>
    </tr>
</table>

Javascript:

<script type="text/javascript">
<!--
var total = parseFloat(0.00);
function calculate(item, id) {
    if (item.checked) {
        total += parseFloat(item.value);
    } else {
        total -= parseFloat(item.value);
    }
    $('span[id="total_' + id + '"]').text(total.toFixed(2) + ' $');
}
//-->

This code working quite good but when I clicked some option on first table then I clicked another option on second table, it continue to count. I want to make this independent for each table options. I separate tables, checkboxes and total span with ID but I couldn't make this, as I want to work.

Thank you so much.

Aucun commentaire:

Enregistrer un commentaire