计算多个复选框值

Calculating multiple checkbox values

本文关键字:复选框 计算      更新时间:2023-09-26

我需要帮助来计算独立表中的每个复选框值。

第一个示例表:

<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>

第二个示例表:

<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) + ' $');
}
//-->

这段代码运行得很好,但当我单击第一个表上的某个选项,然后单击第二个表中的另一个选项时,它继续计数。我想让每个表选项都独立。我用ID分隔表、复选框和总跨度,但我无法做到这一点,因为我想工作。

非常感谢。

您将总值存储在一个全局变量中。你可以用一个数组代替:

var total = new Array();
function calculate(item, id) {
    if (total[id] == undefined)
        total[id] = parseFloat(0.00);
    if (item.checked)
        total[id] += parseFloat(item.value);
    else
        total[id] -= parseFloat(item.value);
    $('span[id="total_' + id + '"]').text(total[id].toFixed(2) + ' $');
}

您需要两个变量才能跟踪两个总计?

var totalTableA = parseFloat(0.00);

var totalTableB = parseFloat(0.00);

然后根据Id:添加到相关总数中

function calculate(item, id) {
if (item.checked) {
    if(id = 847391202) 
    {
         totalTableA += parseFloat(item.value);
    } else {
         totalTableB += parseFloat(item.value);
    }
} else {
    if(id = 847391202) 
    {
         totalTableA -= parseFloat(item.value);
    } else {
         totalTableB -= parseFloat(item.value);
    }
}
$('span[id="total_' + id + '"]').text(totalTableA.toFixed(2) + ' $');
$('span[id="total_' + id + '"]').text(totalTableB.toFixed(2) + ' $');

}