我正在处理使用纯 JavaScript 从复选框列表中获取值,并带有与每个复选框相关的选择字段。
我有这个HTML(带有三个复选框示例)
<section class="options-list">
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-01" id="cb-01" name="checkboxStatus"/>
<label for="cb-01">Page Load Time</label>
<select id="type-01" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-02" id="cb-02" name="checkboxStatus"/>
<label for="cb-02">DB Query</label>
<select id="type-02" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-03" id="cb-03" name="checkboxStatus"/>
<label for="cb-03">Server Response Time</label>
<select id="type-03" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<input type="button" id="save-data" value="Save" onclick="userChoice('checkboxStatus', 'optionStatus')"/>
</section>
下面的JS致力于获取选中的元素
var checkboxes = [];
function userChoice(checkboxName, options) {
checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), cbSelected = [];
Array.prototype.forEach.call(checkboxes, function(el) {
cbSelected.push(el.value);
return cbSelected;
});
return cbSelected;
}
我不确定这是否是最好的方法,但剩下的部分是获取选项值并链接到复选框。
最后,我不确定存储这些数据的最佳方式,你有什么建议?数组的数组?... [[checkboxSelected.value, option.value][checkboxSelected.value, option.value]]
...对象数组... [{状态:“已选中”,选项:值}{状态:“已选中”,选项:值}]
..或者也许是另一个想法
最佳答案
您可以通过引用每个复选框来进行选择。类似cbSelected.parentNode.querySelector('select')
。我个人会使用对象数组来存储数据,但也可以使用数组数组,或者用作 map 的对象。
var model1 = [
{
'type' : 'checkbox',
'id' : '01',
'checked' : true
},
{
'type' : 'select',
'id' : '01',
'value' : 002
}
];
var model2 = {
'01' : {
'checkbox' : true,
'option' : '002'
},
'02' : {
'checkbox' : false,
'option' : 'default'
}
};
关于javascript - 将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34287206/