He creado este ejemplo de código para seleccionar elementos del botón de opción entre los data proporcionados. En esto, cuando hacemos clic en cualquier entrada, su valor se registra en la consola, pero no puedo descifrar cómo registrar en la consola otros valores seleccionados del conjunto de campos también, por ejemplo: - Si selecciono, Blue , se registrará en la consola Blue , pero quiero que la consola registre algo como: - Blue y el resto son S . Otros valores verificados desde otra posición de datos también deben registrarse en la consola. Cualquier ayuda será apreciada.
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>Puedes usar
document.getElementsByName('color').forEach( function(elem) { if(!elem.checked) { //your code if the radio button not checked } } ) En este caso, debe configurar todos los botones de radio que desea ver como atributos de name en color .
Puede simplificar su secuencia de comandos y hacer que se reproduzca en todos los botones de opción. Solo cuando un botón está marcado, se .checked su valor:
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>