Вычисление нескольких значений флажка

Question

Мне нужна помощь для расчета каждого значения флажка в независимых таблицах.

Первый пример таблицы:

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

Этот код работает довольно хорошо, но когда я нажал некоторые вариант на первой таблице, тогда я нажал другую опцию на второй таблице, она продолжает подсчитываться. Я хочу сделать это независимым для каждого параметра таблицы. Я разделяю таблицы, флажки и полный диапазон с идентификатором, но я не мог этого сделать, поскольку я хочу работать.

Большое вам спасибо.

Answer 1

Вы сохраняете общее значение в ОДНОЙ глобальной переменной. Вместо этого вы можете использовать массив:

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

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

}