I have created this code example for selecting items from radio button among the given data. In this, when we click on any input, its value is console logged, but I am not able to figure out on how to console log other fieldset selected values as well, so for eg:- If I select, Blue it will console log Blue, but I want it to console log something like: - Blue and the rest are S. Other checked values from another position of data should also be console logged.
Any help will be greatly appreciated.
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>You can use
document.getElementsByName('color').forEach(
function(elem) {
if(!elem.checked) {
//your code if the radio button not checked
}
}
)
In this case, you should set all of the radio buttons that you want to see name attribute to color.
You can simplify your script and make it loop over all
radio buttons. Only when a button is .checked its value is printed:
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>