如何获得所有其他单选按钮的选中值

Question

我创建了这个代码示例，用于从给定的data中的单选按钮中选择项。在这种情况下，当我们单击任何输入时，它的值是控制台记录的，但我无法弄清楚如何控制日志其他字段集选定的值，所以对于例如:-如果我选择Blue，它将控制台日志Blue，但我希望它控制台日志类似:-Blue和其余的是S。来自其他数据位置的其他检查值也应该被控制台记录。如有任何帮助，我将不胜感激。

const something = document.getElementById('something');
const data = [{
name: 'Color',
values: ['Blue', 'Red', 'Black']
}, {
name: 'size',
values: ['S', 'M', 'L']
}]
const variOptions1 = data[0].values[0];
const variOptions2 = data[1].values[0];
something.innerHTML = data.map((modalVari, indexVariposition) => {
return   `
<fieldset class="modal-variant-form">
<legend class="modal-variant-title">${modalVari.name}:</legend>

${modalVari.values.map((varival, variIndx) => (`
<input type="radio" id="variant-${indexVariposition}-${variIndx}" name="${modalVari.name}" value="${varival}"${variOptions1 == varival || variOptions2 == varival  ? 'checked' : ''}>
<label for="variant-${indexVariposition}-${variIndx}">
${varival}
</label>
`)).join("")}

</fieldset>
`
}).join('');

for (var h = 0; h < data.length; h++) {
const fieldFirst = data[h].name;
const radioButtons = document.querySelectorAll(`input[name="${fieldFirst}"]`);
for (const radioButton of radioButtons) {
radioButton.addEventListener('change', showSelected);
}
function showSelected(e) {
if (this.checked) {
console.log(`You selected ${this.value}`);
}
}
}

<div id="something"></div>

Answer 1

可以使用

document.getElementsByName('color').forEach(
function(elem) {
if(!elem.checked) {
//your code if the radio button not checked
}
}
)

在这种情况下，您应该将希望看到name属性的所有单选按钮设置为color。

Answer 2

您可以简化您的脚本并使其循环遍历所有单选按钮。只有当按钮为.checked时，它的值才会被打印出来:

const something = document.getElementById('something');
const data = [{
name: 'Color',
values: ['Blue', 'Red', 'Black']
}, {
name: 'size',
values: ['S', 'M', 'L']
}]
something.innerHTML = data.map((modalVari, indexVariposition) => {
return `
<fieldset class="modal-variant-form">
<legend class="modal-variant-title">${modalVari.name}:</legend>

${modalVari.values.map((varival, variIndx) => (`
<input type="radio" id="variant-${indexVariposition}-${variIndx}" name="${modalVari.name}" value="${varival}">
<label for="variant-${indexVariposition}-${variIndx}">
${varival}
</label>
`)).join("")}

</fieldset>
`
}).join('');
const radioButtons=[...something.querySelectorAll("input[type=radio]")];
something.addEventListener("click",ev=> {
if (ev.target.type!=="radio") return;
console.log(Object.fromEntries(radioButtons.filter(rb=>rb.checked)
.map(rb=>[rb.name,rb.value])))
})

<div id="something"></div>