CODEWITHSUNDEEP
javascripthtmleventsradio-button
nazarenoalt
nazarenoalt

Reputation: 25

How to detect when a radio input is unchecked in Javascript

I have 4 radio input separated by divs. I want to select the input, and make the card border change. But the event listener only works when it's checked, no when it's unchecked.

Codepen version 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>

Upvotes: 0

Views: 348

Answers (2)

Bulent
Bulent

Reputation: 3411

Is it usually a better idea to add/remove classes to change styles.

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

In CSS

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

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You can maintain a reference to the last selected

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>

I would just add and remove a class so you do not have to maintain a reference to the last selected element.

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>

If you alter the code a bit, you can just do this all in 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>

Upvotes: 2

Related Questions