台灣最大程式設計社群網站
線上人數
842
 
會員總數:244870
討論主題:188880
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> 有關checkbox的value值累加
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
有關checkbox的value值累加
價值 : 15 QP  點閱數:1219 回應數:4

樓主

陳咚咚
門外漢
0 5
44 1
發送站內信

想請教各位
我想要做一個計算菜單價錢的功能
希望打勾的checkbox能夠將數值累加並計算價格
上網爬文後自己修改之後,自己多加了一個能夠全選菜單的checkbox,
但是為何全選之後其他的checkbox也選起,但是價格卻不會變化??
要如何修改呢??

<html>
<script type="text/javascript" src="autoSumCheckboxes.js"></script>
<body>

<form name="exam" method="POST" action="exam_start.php">
<input id="all" name="all" value="" type="checkbox" class="sum" onClick="checkbox_click_all()" >select all<br><br>
<input id="aaa" name="aaa" value="10" type="checkbox" class="sum" onClick="checkbox_click()" > orange
<input id="bbb" name="bbb" value="20" type="checkbox" class="sum" onClick="checkbox_click()" > apple
<input id="ccc" name="ccc" value="30" type="checkbox" class="sum" onClick="checkbox_click()" > banana
</form>

<div >
Your have to pay $<span id="payment-total">0</span>
</div>
</body>
</html>


<script>
function checkbox_click_all()
{
if(document.getElementById('all').checked==true) <!--checkbox全選-->
{
document.exam.aaa.checked=true
document.exam.bbb.checked=true
document.exam.ccc.checked=true
}
if(document.getElementById('all').checked==false)
{
document.exam.aaa.checked=false
document.exam.bbb.checked=false
document.exam.ccc.checked=false
}
}

function checkbox_click()
{
if(document.getElementById('aaa').checked==false
||document.getElementById('bbb').checked==false
||document.getElementById('ccc').checked==false

)

{
document.exam.all.checked=false
}

else
document.exam.all.checked=true
}

var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');


for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add

}
}

搜尋相關Tags的文章: [ checkbox累加 ] ,
本篇文章發表於2015-04-09 18:30
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

育成
捐贈 VP 給 育成 檢舉此回應


1.有些地方沒有加到分號";"

2.checkbox_click()中的else下方少左大括號"{"

3.document.getElementsByClassName好像沒有這個函數

建議做法參考

不用另外加onChange了

checkbox_click_all() 裡面會呼叫checkbox_click() 然後checkbox_click() 會全部重算一次

本篇文章回覆於2015-04-10 08:36
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
最有價值解答

clouding
捐贈 VP 給 clouding 檢舉此回應


補充一下 育成大 說的

1.建議之後用code標籤標起來排版一下,大家會比較好讀

2.有東西參考是好的,不過可能要想一下,哪段程式碼在做什麼,像是全選的function,只有在做checkbox的開關,價格當然不會變化

3.可以用陣列的方式去做

4.<script >之間的東西 最好放在 <head >之間



本篇文章回覆於2015-04-10 09:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

陳咚咚
檢舉此回應
想請問cloudding大大,
您抓的是checkbox的value值做累加計算,
但是我checkbox的value值有post到php另作抓取mysql資料,
如果累加計算要抓取value勢必要將原先的資料庫value改掉
這要怎麼辦呢?
本篇文章回覆於2015-04-11 18:21
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

clouding
捐贈 VP 給 clouding 檢舉此回應


不太懂你的意思,是你checkbox的值要從mysql取得

還是?
本篇文章回覆於2015-04-13 00:59
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

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