我怎樣才能總結選定的複選框行值？

我有一個表在asp.net mvc。在這個表格中，我有一個每行都有的複選框。當我檢查複選框時，我希望在該行中找到工資值，並與其他行檢查的工資總和。我想通過Jquery或java腳本來完成這個總和。我怎樣才能總結選定的複選框行值？

@foreach (var item in Model) 
{ 
     <tr id="rowid"> 
      <td> 
       <input type="checkbox" name="[email protected]" id="[email protected]" class="chkclass" /> 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Name) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.TechnicalNo) 
      </td> 
      <td class="sum" id="wagein"> 
       @Html.DisplayFor(modelItem => item.Wage) 
      </td> 
      <td class="sum" id="time"> 
       @Html.DisplayFor(modelItem => item.Time) 
      </td> 
     </tr> 
}

這是我在asp.net mvc中的代碼。我現在怎樣才能將工資和時間的檢查值相加？

編輯：

我的jQuery代碼：

<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('.chkclass').click(function() { 
     var sum = 0; 
     $('.chkclass:checked').each(function() { 
      sum += parseFloat($(this).closest('tr').find('.wagein').text());  
     }); 
     $('#sum').html(sum); 
    }); 
    }); 
</script>

我的html代碼：

<tr> 
    <td> 
     <input type="checkbox" name="chk-1" id="chk-1" class="chkclass" /> 
    </td> 
    <td class="sum wagein"> 
     10 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="chk-2" id="chk-2" class="chkclass" /> 
    </td> 
    <td class="sum wagein"> 
     10 
    </td> 
</tr>

任何想法？！問題是什麼？！

來源

2012-08-15 Persian.

您皆爲上*非常*舊版本的jQuery - 想過升級？應該大多向後兼容！ – Jamiec 2012-08-15 08:43:46

這裏顯示的標記和你的jQuery代碼的組合工作正常。檢查這個小提琴：http://jsfiddle.net/ADE3a/ - 唯一的區別是即將輸出總數到一個新的div與ID總'放在表下。 – Jamiec 2012-08-15 08:47:33

@Jamiec：我將它升級到1.8.0。你的jsfiddle演示不起作用。但達林的作品。 – 2012-08-15 08:51:27

開始修復您的標記，因爲它是非常破碎。請記住，ID必須是在您的整個HTML文檔獨特：

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      <input type="checkbox" name="[email protected]" id="[email protected]" class="chkclass" /> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Name) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.TechnicalNo) 
     </td> 
     <td class="sum wagein"> 
      @Html.DisplayFor(modelItem => item.Wage) 
     </td> 
     <td class="sum"> 
      @Html.DisplayFor(modelItem => item.Time) 
     </td> 
    </tr> 
}

，那麼你可以訂閱.click()事件的複選框，並積累了總和的所有工資：

$(function() { 
    $('.chkclass').click(function() { 
     var sum = 0; 
     $('.chkclass:checked').each(function() { 
      sum += parseFloat($(this).closest('tr').find('.wagein').text()); 
     }); 
     alert(sum); 
    }); 
});

而且這裏有一個現場演示看到它在行動：http://jsfiddle.net/pbkjr/

來源

2012-08-15 08:06:21

它不工作達林 – 2012-08-15 08:18:09

*它不工作*。就好像你對我說什麼都沒有。定義*不工作*。因爲這對我來說很好，就像你在這個現場演示中看到的一樣：http://jsfiddle.net/pbkjr/ *不工作*是一個不知道或不在乎程序如何工作的用戶常用的句子。另一方面，尋求幫助的開發人員必須更詳細地解釋這一點。他們是否收到錯誤？你有沒有諮詢你的JavaScript調試工具控制檯？ ... – 2012-08-15 08:18:33

是的，它在你的演示中有效。但我不知道爲什麼它不適合我。我在我的頁面中過去你的代碼。但還沒有工作。問題是什麼？！：| – 2012-08-15 08:30:14

好吧，你已經證明了標記，正確地包裹着<table></table>標籤，下面一個div開始顯現總：

點擊任何複選框時

<table> 
<tr> 
    <td> 
     <input type="checkbox" name="chk-1" id="chk-1" class="chkclass" /> 
    </td> 
    <td class="sum wagein"> 
     10 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="chk-2" id="chk-2" class="chkclass" /> 
    </td> 
    <td class="sum wagein"> 
     10 
    </td> 
</tr> 
</table> 
<div id="total"></div>

以下的jQuery（這@Darin寫）將總結所有選中的行：

$('.chkclass').click(function() { 
     var sum = 0; 
     $('.chkclass:checked').each(function() { 
      sum += parseFloat($(this).closest('tr').find('.wagein').text());  
     }); 
     $('#total').html(sum); 
    });

這是非常接近Darin的原創，但我已經改變了最後一行將總數輸出到ID爲total的div。這似乎比寫每一行的總和更可能！

這可以看出，在這個活生生的例子：http://jsfiddle.net/ADE3a/

來源

2012-08-15 08:52:26 Jamiec

你不覺得你的答案類似於什麼嗎？發表相同答案兩次的意義何在？ – 2012-08-15 08:53:01

是的，是的，我願意。這正是*** OP寫的代碼，只有1個小小的改變。有時候人們只需要確認他們是否在正確的軌道上，這可能會促使OP找到他們犯了錯誤的地方。打敗他們的時候，他們沒有發佈他們的標記！ – Jamiec 2012-08-15 08:53:32

不，不是OP寫的代碼。代碼**我寫了**，他複製了他的問題，並抄襲了您的答案！如果你看看OP發佈的原始問題，那麼就沒有單一的javascript跟蹤。 – 2012-08-15 08:55:15

我怎樣才能總結選定的複選框行值？

回答

相關問題