html 复选框关联数组 - 如何在 javascript 中访问此数组？

Question

我正在尝试这样做：

<input type="checkbox" name="appliances[microwave]">
<input type="checkbox" name="appliances[coffee-machine]">
<input type="checkbox" name="appliances[grill]">

并像这样在javascript中访问这个数组

1.

var myarr = document.getElementsByName('appliances');
alert('here ' + myarr);

结果：警报显示“此处 [object NodeList]”

2.

var myarr = document.getElementsByName('appliances');
    alert('here ' + myarr['grill']);

结果：警报显示“此处未定义”

我怎样才能访问这个数组？

Answer 1

就 HTML 而言，您的元素都有不同的名称，"appliances[microwave]"、"appliances[coffee-machine]" 等。这些名称仅对某些软件是特殊的（例如，PHP 将在表单提交时处理它们）。

您可以使用querySelectorAll 和选择器input[name^=appliances] 来查找名称​​以 以appliances 开头的所有元素。然后您通过索引（0、1 和 2）访问该 NodeList 中的条目：

const checkboxes = document.querySelectorAll("input[name^=appliances]");
for (let n = 0; n < checkboxes.length; ++n) {
    console.log(`${checkboxes[n].name} checked? ${checkboxes[n].checked}`);
}

<input type="checkbox" checked name="appliances[microwave]">
<input type="checkbox" name="appliances[coffee-machine]">
<input type="checkbox" name="appliances[grill]">
<!-- A fourth one just to show that it won't get selected: -->
<input type="checkbox" name="something-else">

如果您想通过[] 中的名称访问它们，您可以创建一个对象并将它们作为属性放在对象上：

function getNamedElementObject(baseName) {
    const result = {};
    // NOTE: The next line assumes there are no `]` characters in `name`
    const list = document.querySelectorAll(`[name^=${baseName}]`);
    for (const element of list) {
        const match = element.name.match(/\[([^]+)\]/);
        if (match) {
            const propName = match[1]
            result[propName] = element;
        }
    }
    return result;
}

const checkboxes = getNamedElementObject("appliances");
console.log(`checkboxes["microwave"].checked? ${checkboxes["microwave"].checked}`);
console.log(`checkboxes["coffee-machine"].checked? ${checkboxes["coffee-machine"].checked}`);
console.log(`checkboxes["grill"].checked? ${checkboxes["grill"].checked}`);
// You could also loop through by getting an array from `Object.values`:
for (const checkbox of Object.values(checkboxes)) {
    console.log(`${checkbox.name} checked? ${checkbox.checked}`);
}

<input type="checkbox" checked name="appliances[microwave]">
<input type="checkbox" name="appliances[coffee-machine]">
<input type="checkbox" name="appliances[grill]">
<!-- A fourth one just to show that it won't get selected: -->
<input type="checkbox" name="something-else">

或者你可以使用Map:

function getNamedElementMap(baseName) {
    const result = new Map();
    // NOTE: The next line assumes there are no `]` characters in `name`
    const list = document.querySelectorAll(`[name^=${baseName}]`);
    for (const element of list) {
        const match = element.name.match(/\[([^]+)\]/);
        if (match) {
            const propName = match[1]
            result.set(propName, element);
        }
    }
    return result;
}

const checkboxes = getNamedElementMap("appliances");
console.log(`checkboxes.get("microwave").checked? ${checkboxes.get("microwave").checked}`);
console.log(`checkboxes.get("coffee-machine").checked? ${checkboxes.get("coffee-machine").checked}`);
console.log(`checkboxes.get("grill").checked? ${checkboxes.get("grill").checked}`);
// You could also loop through via the iterator from the `values` method:
for (const checkbox of checkboxes.values()) {
    console.log(`${checkbox.name} checked? ${checkbox.checked}`);
}

<input type="checkbox" checked name="appliances[microwave]">
<input type="checkbox" name="appliances[coffee-machine]">
<input type="checkbox" name="appliances[grill]">
<!-- A fourth one just to show that it won't get selected: -->
<input type="checkbox" name="something-else">