How to get checked values of all other Radio Buttons-CodePudding

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 >
    <legend >${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>

CodePudding user response：

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.

CodePudding user response：

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 >
        <legend >${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>