如何检测 Javascript 中未选中无线电输入的时间

Question

我有 4 个无线电输入，由 div 分隔。我想 select 输入，并更改卡片边框。但是事件侦听器只有在勾选的时候才起作用，不勾选的时候没有。

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>

Answer 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>

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

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>

Answer 2

add/remove 类改变样式通常是更好的主意吗？

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
}

如何检测 Javascript 中未选中无线电输入的时间

How to detect when a radio input is unchecked in Javascript

html

javascript

events

radio