台灣最大程式設計社群網站
線上人數
937
 
會員總數:244870
討論主題:188880
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> JQuery如何動態計算表單欄位加總
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
JQuery如何動態計算表單欄位加總
價值 : 50 QP  點閱數:616 回應數:8

樓主

小飛
初學者
197 283
1437 198
發送站內信



我有1表單欄位,要將特定的幾個欄位的數值加總,即時動態呈現在頁面上,這功能如何呈現?

<select name="s1" id="s1" class="form-control">
<option value="">請選擇</option>
<option value="100">100</option>
<option value="200">200</option>
</select>

<input name="tx1" id="tx1" type="text" class="form-control">

總計 :<span id="total">0</span>

感謝!


搜尋相關Tags的文章: [ 動態計算加總 ] ,
本篇文章發表於2018-09-20 11:22
== 簽名檔 ==
小飛
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

彩虹
檢舉此回應
你要加總欄位,都是 <select> 選擇的值嗎?
還是包含 <input> 要做加總

這會有不同的方式∼
本篇文章回覆於2018-09-20 11:47
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

小飛
檢舉此回應
<select> 和 <input> 都要
謝謝
本篇文章回覆於2018-09-20 11:56
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

彩虹
檢舉此回應
剛剛忘記說,提醒您「請善用程式碼標籤」

請參考以下比較簡單易懂的做法:

select 透過 onchange 事件,觸發 sumAll()
input 透過 onkeyup 事件,觸發 sumAll()

sumAll() 裡面會負責做加總,並顯示出來


本篇文章回覆於2018-09-20 12:11
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

彩虹
檢舉此回應
哈囉 #小飛
我發現你只有問問題或回覆問題時,會很勤的出現,回覆速度也非常之快
解決問題之後就整個消失

如果有任何問題請再提出
而不是文章整個擺著,不做結案

本篇文章回覆於2018-09-20 23:35
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
作者回應

小飛
檢舉此回應
不好意思喔!您的方法很清楚,很容易了解,所以我也試著去做radio的欄位加進去,就弄不出來了,所以是在弄這個卡住了,那請問加上radio的欄位是用哪個事件?
本篇文章回覆於2018-09-21 10:49
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
最有價值解答

彩虹
檢舉此回應
onclick , onchange 都可以,請看範例

第一個方式
可以在這邊補上 <input type='radio' name='radioNumber' value="100" onclick="sumAll()">100
搭配「$("input[name='radioNumber']:checked").val()」這樣取值


或者第二個方式
直接使用JQ來賦予事件
$("input[name='radioNumber']").change(function(){});

本篇文章回覆於2018-09-21 11:19
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
作者回應

小飛
檢舉此回應
都了解了,也解決了,謝謝您的講解!
本篇文章回覆於2018-09-21 12:02
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
回應

彩虹
檢舉此回應
有蠻多種方式可以做的
上面提供的方式比較粗略易懂

了解目前的方式之後,你也可以自己想想要如何改寫,讓程式碼更精簡

基本上可以全部用JQ搞定,就不用再input裡打上 onkeyup之類的
直接使用JQ賦予事件
本篇文章回覆於2018-09-21 12:09
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.