如果聲明爲三個複選框javascript

我最近在大學開始了JavaScript，並且遇到了一些麻煩。我不包括我的代碼在這裏，因爲我不希望它寫給我，我只需要一些指向正確的方向。如果聲明爲三個複選框javascript

所以，我有三個複選框，每個都有不同的值，我需要將所選框的值加在一起。我知道如何做到這一點，但我做這件事的方式似乎有點長，我確定有更好的辦法。

目前我有一個if語句檢查box1 box2和box3是否被選中，如果他們是然後他們被添加，否則如果box 1和box2被選中，他們被添加，否則如果box1和box2被選中，他們被添加和等等。

所以基本上即時檢查每個盒子可以選擇，每次一個組合。必須有一個更有效的方式來實現這一點，所以任何提示將不勝感激。預先感謝您的幫助。

來源

2013-05-16 user2390604

你問過你的助教嗎？ – smcg

代碼會有幫助，但我認爲在這種情況下它不是必需的。如果需要，您可以只使用所選元素的值，如果需要則不使用。 – Duffmaster33

您要求進行代碼審查，沒有任何問題。試試這裏：http://codereview.stackexchange.com/，因爲在這裏我們更多地解決代碼問題。 –

假設你的HTML如下所示：

<input name="demo" type="checkbox" checked value="1" /> 
<input name="demo" type="checkbox" value="2" /> 
<input name="demo" type="checkbox" checked value="3" />

然後只檢索相關名稱的元素，然後通過收集/節點列表迭代和值添加到聲明「總」變量：

var boxes = document.getElementsByName('demo'), 
    total = 0; 

for (var i = 0, len = boxes.length; i < len; i++){ 
    if (boxes[i].checked && boxes[i].type.toLowerCase() == 'checkbox') { 
     total += parseInt(boxes[i].value, 10); 
    } 
} 

console.log(total);

JS Fiddle demo。

上面的代碼是，我認爲，跨瀏覽器兼容;但如果你正在尋找一個更先進的技術，最新，簡化了for環（省略if檢查），那麼你可以使用document.querySelectorAll()作爲選擇技術：

var boxes = document.querySelectorAll('input[name="demo"][type="checkbox"]:checked'), 
    total = 0; 

for (var i = 0, len = boxes.length; i < len; i++){ 
    total += parseInt(boxes[i].value, 10); 
} 

console.log(total);

JS Fiddle demo。

參考文獻：

來源

2013-05-16 15:28:19

不錯，會推薦querySelectorAll，這樣你就不必使用類型檢查。如果他在大學，他可能應該學習最新的技術。 –

同意，我正在編輯它（在審查了一個建議的編輯後，我放慢了一兩次）。 –

使用+=和一個簡單的三元運算符：

var total = 0; 
total += document.getElementById('cb1').checked ? parseInt(document.getElementById('cb1').value, 10) : 0; 
total += document.getElementById('cb2').checked ? parseInt(document.getElementById('cb2').value, 10) : 0; 
total += document.getElementById('cb3').checked ? parseInt(document.getElementById('cb3').value, 10) : 0; 
alert(total);

我應該披露是一樣的：

var total2 = 0; 
if (document.getElementById('cb1').checked) total2 += parseInt(document.getElementById('cb1').value, 10); 
if (document.getElementById('cb2').checked) total2 += parseInt(document.getElementById('cb2').value, 10); 
if (document.getElementById('cb3').checked) total2 += parseInt(document.getElementById('cb3').value, 10); 
alert(total2);

例如HTML：

<input id="cb1" type="checkbox" value="341" checked /> 
<input id="cb2" type="checkbox" value="242" /> 
<input id="cb3" type="checkbox" value="345" checked />

來源

2013-05-16 16:12:21

如果聲明爲三個複選框javascript

回答

相關問題