Jquery計算從一排複選框總計

Question

基本上，我遇到的問題是第二個下拉列表（bagel_form）正在繼承第一個下拉列表中的任何值，並基於此計算總數。

我想要發生的是根據它的當前下拉值將它的值添加到總數中。如果該框被選中，則添加到總數，如果該框未被選中，則從總數中減去。 （基於下拉修飾符）。

我做了一個小提琴來說明問題，因爲它有點混亂。

http://jsfiddle.net/Gqzhq/5/

---

HTML

<table id="hor-minimalist-b" summary="Breakfast Sponsor"> 
<th>Pizza</th> <th>Bagel</th> 

<tr> 
<td><input type="checkbox" name="pizza_form" id="1" value="500"> 
    <select id="my_select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option></td> 

    <td><input type="checkbox" name="bagel_form" id="1" value="200"> 
    <select id="my_select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option></td> 

    </tr> 

    </table> 
    <div id="total_price">Total:</div> 
<input class="total" readonly="readonly"> 

---

jQuery的

var total = 0; 
$('input[name=pizza_form], input[name=bagel_form] ').live('click', function() { 
    var current_price = parseInt($(this).attr('value')); 
    if($(this).hasClass('checked')) 
    { 
    $(this).removeClass('checked'); 
    total -= current_price ; 
    remove_dropdowns(total) ; 
    } 
    else 
    {  
    $(this).addClass('checked'); 
    total += current_price ; 
    add_dropdowns(total) ; 
    } 

    function add_dropdowns(total) { 
    var quantity = parseInt($('#my_select').val()); 
    var new_price = parseInt(quantity * total); 
    $("input[class='total']").val(new_price); 

    $('select#my_select').change(function() { 
    var quantity = parseInt($('#my_select').val()); 
    var new_price = parseInt(quantity * total); 
    $("input[class='total']").val(new_price); 

    }); 
     } 

    function remove_dropdowns(total) { 
    var quantity = parseInt($('#my_select').val()); 
    var new_price = parseInt(quantity * total); 
    $("input[class='total']").val(new_price); 

    $('select#my_select').change(function() { 
    var quantity = parseInt($('#my_select').val()); 
    var new_price = parseInt(quantity * total); 
    $("input[class='total']").val(new_price); 

    }); 
     } 
}); 

Answer 1

您正在重複ID（myselect）。如果你重複ID並嘗試按ID選擇，它將會選擇第一個。

這裏的工作代碼：

http://jsfiddle.net/Gqzhq/10/

我改變myselect一類，並傳遞給當前複選框的參考。從那裏你可以找到第二個最接近的.myselect並使用該值。