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

我創建了這個代碼示例，用于從給定的單選按鈕中選擇專案data。在這種情況下，當我們單擊任何輸入時，它的值是控制臺記錄的，但我無法弄清楚如何控制臺記錄其他欄位集選擇的值，因此例如：- 如果我選擇，Blue它將控制臺日志Blue，但我希望它控制臺記錄如下內容： -Blue其余的是S. 來自另一個資料位置的其他檢查值也應該被控制臺記錄。任何幫助將不勝感激。

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('');


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>

uj5u.com熱心網友回復：

您可以使用

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

在這種情況下，您應該將所有要查看的單選按鈕name屬性設定為color。

uj5u.com熱心網友回復：

這個答案試圖實作以下（來自問題）：

如何控制臺記錄其他欄位集選擇的值

下面介紹的是實作預期目標的一種可能方式。

代碼片段

const something = document.getElementById('something');

// set-up an object to hold the options for all field-sets
const selectedOptions = {};

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('');


for (var h = 0; h < data.length; h  ) {
  const fieldFirst = data[h].name;
  
  // initialize Color, Size props to empty-string
  selectedOptions[fieldFirst] = '';
  
  const radioButtons = document.querySelectorAll(`input[name="${fieldFirst}"]`);
  for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelected);
  }

  function showSelected(e) {
    // update the object "selectedOptions" for either Color or Size
    selectedOptions[this.name] = this.value;
    if (this.checked) {
      console.log(`You selected ${this.value}`);
      // console-log all selected options
      console.log('All selected options at this time: ', selectedOptions);
    }
  }
}

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

解釋

添加到上述代碼段的行內注釋。

uj5u.com熱心網友回復：

您可以簡化腳本并使其回圈遍歷所有單選按鈕。只有當一個按鈕是.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 >
        <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;
 radioButtons.forEach(rb=>
  rb.checked&&console.log(`You selected ${rb.value}`))
})

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

標籤：javascript

上一篇：如何正確記住這種遞回關系？

下一篇：使用Angular(@angular/fire)在Firestore中添加、更新和讀取子集合