如何通過單擊選擇單選按鈕以在單擊時更改顏色

我正在嘗試為我的教室制作一個數學問答游戲。我創建了一個頁面來選擇用戶想要的游戲型別。我創建了一個函式來選擇元素，當它被單擊以更改顏色但它沒有更改顏色時。我試圖對樣式進行硬編碼并且它可以正常作業，但我只想要在選擇無線電容器時的樣式。

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');

startForm.addEventListener('click', () => {
  radioContainers.forEach((radioEl) => {
    radioEl.classList.remove('selected-label');
    if (radioEl.childeren[1].checked) {
      radioEl.classList.add('selected-label');
    }
  });
});

RADIO CONTAINER TO BE SELECTED
<div class="radio-container">
  <label for="value-99">99 Questions</label>
  <input type="radio" name="Questions" value="99" id="value-99">
  <span class="best-score">
                            <span>Best Score</span>
  <span class="best-score-value">0.0</span>
  </span>
</div>

uj5u.com熱心網友回復：

我想你的意思是這個

startForm 的委托很好，然后我們可以遍歷 div 來查看 div 中的 radio 是否被選中

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');

startForm.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.name === "Questions") {
    const parent = tgt.closest('.radio-container')
    radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
  }
});

.selected-label { color: green }

<form id="start-form">
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
</form>

uj5u.com熱心網友回復：

問題有點重復。 檢查時更改標簽顏色單選 我從這里得到了答案，它可以使用 CSS 完成，而無需使用 JavaScript。
（注意一些按鈕在點擊時有不同的顏色）這是一個片段

input[type="radio"]:checked ~ span
{
color:red;

}

input[type="radio"]:checked.correct ~ span
{
color:green;
}

<form id="start-form">
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
</form>

標籤：

上一篇：在子組件中改變陣列道具是否有效？

下一篇：list.pop的Javascript版本