如何检测何时在 Javascript 中未选中无线电输入答案

【问题标题】：How to detect when a radio input is unchecked in Javascript如何检测何时在 Javascript 中未选中无线电输入
【发布时间】：2021-06-02 11:51:34
【问题描述】：

我有 4 个无线电输入，由 div 分隔。我想选择输入，并更改卡片边框。但是事件监听器只有在选中时才起作用，在未选中时不起作用。

Codepen 版本https://codepen.io/nazarenoalt/pen/dyOKqYp

const radioList = document.querySelectorAll('.back-product.radio')
const cardList = document.querySelectorAll('.back-product.card')

for(let i = 0; i < radioList.length; i++) {
    radioList[i].addEventListener('change', function() {
        cardList[i].style.border = '2px solid lightblue';
        
        if(!radioList[i].checked) {
        cardList[i].style.border = '1px solid gray';
        }
    })
}

HTML

<div class="card back-product">
  <input type="radio" class="back-product radio"  name="product">
</div> 

<div class="card back-product">
  <input type="radio" class="back-product radio"  name="product">
</div> 

<div class="card back-product">
  <input type="radio" class="back-product radio"  name="product">
</div> 

<div class="card back-product">
  <input type="radio" class="back-product radio"  name="product">
</div>

【问题讨论】：

使用类！让一切变得如此简单

标签： javascript html events radio

【解决方案1】：

您可以保留对最后选择的引用

const radioList = document.querySelectorAll('.back-product.radio')
const cardList = document.querySelectorAll('.back-product.card')
let lastSelected;

for (let i = 0; i < radioList.length; i++) {
  radioList[i].addEventListener('change', function() {
    if (lastSelected) {
      lastSelected.style.border = '1px solid gray';
    }
    cardList[i].style.border = '2px solid lightblue';
    lastSelected = cardList[i];
  });
}

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

我只需添加和删除一个类，这样您就不必维护对最后一个选定元素的引用。

const radioList = document.querySelectorAll('.back-product.radio')

for (let i = 0; i < radioList.length; i++) {
  radioList[i].addEventListener('change', function(event) {
    const lastActive = document.querySelector(".card.active");
    if (lastActive) lastActive.classList.remove("active");
    event.target.closest(".card").classList.add("active");
  })
}

.card {
  border: 1px solid gray;
}

.card.active {
  border: 2px solid lightblue;
}

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

<div class="card back-product">
  <input type="radio" class="back-product radio" name="product">
</div>

如果你稍微修改一下代码，你可以在 CSS 中完成这一切

input[name] {
  display: none;
}

.card {
  display: block;
  border: 1px solid gray;
  cursor: pointer;
}

input[name]:checked+.card {
  border: 2px solid lightblue;
}

<input type="radio" class="back-product radio" name="product" id="p1">
<label class="card back-product" for="p1">
X
</label>

<input type="radio" class="back-product radio" name="product" id="p2">
<label class="card back-product" for="p2">
X
</label>

<input type="radio" class="back-product radio" name="product" id="p3">
<label class="card back-product" for="p3">
X
</label>

<input type="radio" class="back-product radio" name="product" id="p4">
<label class="card back-product" for="p4">
X
</label>

【讨论】：

【解决方案2】：

添加/删除类以更改样式通常是一个更好的主意。

const cards = document.querySelectorAll('.card');

document.querySelectorAll('.radio').forEach(radio => {
  radio.addEventListener('change', () => {
    cards.forEach(card => card.classList.remove('selected'));
    radio.closest('.card').classList.add('selected');
  })
})

在 CSS 中

.card.selected {
  border: 2px solid lightblue
}

【讨论】：