[英]html checkboxes associative array - how to access this array in javascript?
我正在尝试这样做:
<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);
结果:警报显示“此处 [对象 NodeList]”
2.
var myarr = document.getElementsByName('appliances');
alert('here ' + myarr['grill']);
结果:警报显示“此处未定义”
我怎样才能访问这个数组?
就 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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.