如果复选框值为 = "something"则从数组中获取值

Question

我想做一个小测验。但是在开始之前，用户可以选择他想要出现的问题，为此，我有一组复选框，每个复选框都有一个值，例如:

<li>
<input type="checkbox" name="checkHA" id="check1" value="1">

<label for="check1">Heart of Algebra</label>
</li>
<li>
<input type="checkbox" name="checkGLE" id="check4" value="2">

<label for="check4">Graphing linear equations</label>
</li>

复选框值对应于问题所在数组的值。我想作为一个复选框被选中，它采取的问题，匹配其值和显示在测验。

有意义吗?如果不是，我可以换个说法吗?

Answer 1

• 为所有复选框使用相同的name属性值
如果在LABEL中包装INPUT，则不需要
• id。
• 使用Array.prototype.reducereduce一个NodeList of Elements to检查值的数组:

let choices = [];
const ELS_chk = document.querySelectorAll("[name='chk']");
const changeChoices = () => {
choices = [...ELS_chk].reduce((a, EL) => {
if (EL.checked) a.push(EL.value);
return a;
}, []);
console.log(choices)
};
ELS_chk.forEach(EL => EL.addEventListener("change", changeChoices));

<label><input type="checkbox" name="chk" value="1">Heart of Algebra</label>
<label><input type="checkbox" name="chk" value="2">Graphing linear equations</label>
<label><input type="checkbox" name="chk" value="3">Programming</label>

如果您希望值与一组预定义的问题匹配，请使您的值更具描述性，您可以使用数组对象:

const questions = {
"algebra"     : [{q:["1","2"], a:0}, {q:["1","2"], a:1}, {q:["1","2","3"], a:0}],
"glEquations" : [{q:["1","2","3"], a:2}, {q:["1","2"], a:1}, {q:["1","2"], a:0}],
"programming" : [{q:["1","2"], a:1}, {q:["1","2","3"], a:1}, {q:["1","2"], a:1}],
};
const ELS_chk = document.querySelectorAll("[name='chk']");
const changeChoices = () => {
const questionsByChioces = [...ELS_chk].reduce((a, EL) => {
if (EL.checked) a.push(questions[EL.value]);
return a;
}, []);
console.log(questionsByChioces)
};
ELS_chk.forEach(EL => EL.addEventListener("change", changeChoices));

<label><input type="checkbox" name="chk" value="algebra">Heart of Algebra</label>
<label><input type="checkbox" name="chk" value="glEquations">Graphing linear equations</label>
<label><input type="checkbox" name="chk" value="programming">Programming</label>