假设我们有一个空数组,我们希望根据选中的复选框填充它:
let selected = [];
还有一些人名的数组:
let names = ['Joe', 'Mike', 'Sara', 'Jack'];
我想首先为每个 name's
元素生成复选框,然后我想将每个选中的元素添加到 selected
数组。
我可以用下拉菜单(下面的代码)来做到这一点,但我不知道如何用复选框来做到这一点:
let dropDown = document.getElementById('names');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];
// Loop through each of the voices.
names.forEach(function(e, i) {
// Create a new option element.
var option = document.createElement('option');
// Set the options value and text.
option.value = names[i];
option.innerHTML = names[i];
// Add the option to the voice selector.
dropDown.appendChild(option);
});
// 3 seconds to select the item
setTimeout(function() {
if (dropDown.value) {
selected.push(dropDown.value)
}
console.log(selected)
}, 3000)
<div class="option">
<label for="voice">US Pronunciation:</label>
<select name="voice" id="names"></select>
</div>
最佳答案
您必须为复选框添加一个 onClick 事件处理程序,并以这种方式将它们添加到选择中。像这样的事情应该让您开始:
let dropDown = document.getElementById('names');
let container = document.getElementById('container');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];
// Loop through each of the voices.
names.forEach(function(e, i) {
let html = `
<input onClick="handleCheck('container', 'names')" type="checkbox" name="checkbox" id="${i}_${e}" value="${e}">
<label for="${i}_${e}">${e}</label>
`;
container.innerHTML += html;
});
function handleCheck(containerElementId, inputElementId) {
let containerElement = document.getElementById(containerElementId);
let select = document.getElementById(inputElementId);
select.innerHTML = "";
selected = [];
containerElement.querySelectorAll('input[type="checkbox"]').forEach(el => {
if(el.checked) {
select.innerHTML += `<option value="${el.value}">${el.value}</option>`;
selected.push(el.value);
}
})
console.log("selected", selected);
}
<div class="option" id="container">
<label for="voice">US Pronunciation:</label>
<select name="voice" id="names"></select>
</div>
关于javascript - 根据数组元素生成复选框,然后根据选中的复选框填充另一个数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59547420/