如何獲取所有其他單選按鈕的選中值

Question

我創建了這個代碼示例，用於從給定data中的單選按鈕中選擇項目。 在這里，當我們點擊任何輸入時，它的值是控制台記錄的，但我無法弄清楚如何控制台記錄其他字段集選擇的值，所以例如：- 如果我 select， Blue它將控制台日志Blue ，但我希望它能夠控制台記錄如下內容： - Blue和 rest 是S 。 來自另一個 position 數據的其他檢查值也應該記錄在控制台中。 任何幫助將不勝感激。

 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>