JavaScript 選中輸入類型的最大數量復選框

Question

使用 ASP.NET 生成多個復選框。 尋找一個 JavaScript 解決方案，該解決方案將測試以名稱pdf*開頭的任何復選框，以查看是否選中了 5 個以上的復選框，然后對該數字發出警報。

還有其他復選框我不希望它運行在沒有名稱pdf*復選框上。

提前致謝。

這是我的復選框的示例：

<td><input type="checkbox" name="pdf14" value="2250"></td>

<td><input type="checkbox" name="pdf15" value="2251"></td>

<td><input type="checkbox" name="pdf16" value="2252"></td>
 
<td><input type="checkbox" name="print" value="2253"></td> 

<<<不是計數的一部分

Answer 1

var inputs = document.getElementsByTagName("input");
var numSelected = 0;
var current;

for (var i=inputs.length;i--;) {
    current = inputs[i];

    if (current.type.toLowerCase() == "checkbox" && current.checked && current.name.indexOf("pdf") == 0) {
        current++;
    };
};

if (current > 5) {
    alert("You've got " + current + " selected! :(");
}

如果你碰巧使用了 jQuery，那就很簡單了

var selectedPdfCheckboxes = $('input:checkbox[name^=pdf]');

if (selectedPdfCheckboxes.length > 5) {
    alert("You've got " + selectedPdfCheckboxes.length + " selected! :(");
}

編輯：

我使用的 jQuery 選擇器 ( ^= ) 讀作“開始於”，因此不需要 * 等效項。

jQuery 代碼將在它放置的任何地方執行，但是它必須在document.ready()之前執行，以確保您選擇的元素存在於 DOM 中。 如果你把它放在 document.ready 中，它會在文檔就緒事件被觸發后立即觸發。 您可能希望將代碼放在另一個事件的事件處理程序中……例如提交表單？

$(document).ready(function () {
    $("#aForm").bind('submit', function (e) {
        var selectedPdfCheckboxes = $('input:checkbox[name^=pdf]');

        if (selectedPdfCheckboxes.length > 5) {
            alert("You've got " + selectedPdfCheckboxes.length + " selected! :(");

            e.preventDefault();        
        }
    });
});