[英]How can I create an array from names and values of checkboxes in Javascript?
Imagine I have an array of selected checkboxes.想象一下,我有一组选定的复选框。 Each has a value and name that corresponds with a filter.
每个都有一个与过滤器对应的值和名称。
<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">
How can I sort these into one array, like below?如何将这些排序为一个数组,如下所示?
const filters = [
'colors': [ 'blue', 'orange'],
'items': ['chair', 'bed'],
'material': ['plastic', 'wood'],
]
You could get the elements and build an object of arrays.您可以获取元素并构建数组对象。
const result = {}; for (const { name, value } of document.getElementsByClassName('filter-item--checkbox')) { (result[name] ??= []).push(value); } console.log(result);
<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue"> <input class="filter-item--checkbox" type="checkbox" name="colors" value="orange"> <input class="filter-item--checkbox" type="checkbox" name="items" value="chair"> <input class="filter-item--checkbox" type="checkbox" name="items" value="bed"> <input class="filter-item--checkbox" type="checkbox" name="material" value="plastic"> <input class="filter-item--checkbox" type="checkbox" name="material" value="wood">
For the OP's use case, where it was said that a solution should target just checked checkbox controls one could/should utilize the FormData
Web-API and its entries
method together with a reduce
task.对于 OP 的用例,据说解决方案应该针对刚刚选中的复选框控件,可以/应该将
FormData
Web-API及其entries
方法与reduce
任务结合使用。 Passing a form reference directly into the FormData
constructor ensures only active control data to be part of the form data object.将表单引用直接传递到
FormData
构造函数可确保只有活动控件数据成为表单数据对象的一部分。 Thus the name/key and value of an unchecked checkbox control gets not reflected by the form data object.因此,表单数据对象不会反映未选中复选框控件的名称/键和值。
const formData = new FormData(document.forms[0]); console.log( Array .from( formData.entries() ) .reduce((result, [key, value]) => { const groupedValueList = (result[key] ??= []); groupedValueList.push(value); return result; }, {}) );
.as-console-wrapper { min-height: 85%!important; }
<form> <input type="checkbox" name="colors" value="blue" checked/> <input type="checkbox" name="colors" value="orange" checked/> <input type="checkbox" name="items" value="chair" checked/> <input type="checkbox" name="items" value="bed" checked/> <input type="checkbox" name="material" value="plastic" checked/> <input type="checkbox" name="material" value="wood" checked/> </form>
In case of collecting all grouped checkbox values regardless of their checked
state one just needs to change the above approach slightly too ...如果收集所有分组的复选框值而不管它们的
checked
状态如何,只需要稍微改变上述方法......
console.log( Array .from( document.querySelectorAll('form [type="checkbox"]') ) .reduce((result, { name:key, value }) => { const groupedValueList = (result[key] ??= []); groupedValueList.push(value); return result; }, {}) );
.as-console-wrapper { min-height: 85%!important; }
<form> <input type="checkbox" name="colors" value="blue" checked/> <input type="checkbox" name="colors" value="orange"/> <input type="checkbox" name="items" value="chair" checked/> <input type="checkbox" name="items" value="bed"/> <input type="checkbox" name="material" value="plastic" checked/> <input type="checkbox" name="material" value="wood"/> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.