如何使用JavaScript處理大型html複選框？

Question

所以我有這樣的一個形式裏面

<input type="checkbox" name="arr" value="A" />A 
<input type="checkbox" name="arr" value="B" />B 
<input type="checkbox" name="arr" value="C" />C 
<input type="checkbox" name="arr" value="D" />D 
<input type="checkbox" name="arr" value="E" />E 
... 
<more checkboxes here> 
... 

在我的JavaScript我想創建一個由被選中的複選框的值的數組。所以如果B和D被檢查，它應該是[B, D]。

感謝

編輯：我壞不包括jQuery的標籤，但誰刪除了他的答案的人給我使用jQuery一個很好的和短的工作方案：

var valueArray = $('input[type="checkbox"][name="arr"]:checked').map(function() { 
    return this.value; 
}).get(); 

Answer 1

根據你使用它，它可能只是使用name="arr[]"。提交表單時，服務器端會自動將選中的複選框值轉換爲數組。但是，如果您試圖單純地在客戶端JavaScript中獲取該數組，則會涉及更多一點。試試這個：

function getCheckedBoxes(name) { 
    if(document.querySelectorAll) { 
     var qsa = document.querySelectorAll("input[type=checkbox][name='"+name+"']"), 
      l = qsa.length, i, out = []; 
     for(i=0; i<l; i++) if(qsa[i].checked) out.push(qsa[i].value); 
    } 
    else { 
     var qsa = document.getElementsByTagName('input'), l = qsa.length, i, out = []; 
     for(i=0; i<l; i++) { 
      if(qsa[i].type == 'checkbox' && qsa[i].name == name && qsa[i].checked) 
       out.push(qsa[i].value); 
     } 
    } 
    return out; 
}; 

Answer 2

你可以使用jQuery像這個：

$("input[type=checkbox][name=arr][checked]").each( 
    function() { 
     // collect the values 
    } 
);