javascript - 如何从三种形式之一获取所有复选框？

Question

我有三个表单，每个表单都有复选框和提交按钮。我需要通过单击此表单中的提交按钮来获取所有复选框名称或 ID。另外两个也是如此。

function getCheckedBoxes(item) {
    var checkboxes = document.getElementsByName(item);
    var checkboxesChecked = [];
    // loop over them all
    for (var i=0; i<checkboxes.length; i++) {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked) {
            checkboxesChecked.push(checkboxes[i]);
        }
    }
    // Return the array if it is non-empty, or null
    console.log(checkboxes);
    return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

var inp = document.getElementsByName('send');
for(var i = 0; i < inp.length; i++){
    inp[i].addEventListener('click', function(e) {
        getCheckedBoxes("item");
        e.preventDefault();
    });
}

我的复选框示例

<form>
    <input id="check29" type="checkbox" name="item" value="29" />
    <input class="lab-btn" type="submit" value="ADD ALL" name="send">
</form>

Answer 1

您可以将表单作为参数传递给函数，然后使用 querySelectorAll 获取具有所需名称的所有输入。

首先，将事件处理程序更改为:

inp[i].addEventListener('click', function(e) {
    getCheckedBoxes(this.form, "item");
    e.preventDefault();
});

然后函数本身:

function getCheckedBoxes(oForm, item) {
    var checkboxes = oForm.querySelectorAll('input[name="' + item + '"]');
    //...
}