JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="radio-group">
  <label for="ty0101">ty0101</label>
  <input type="radio" name="ty01" id="ty0101">
  <label for="ty0102">ty0101</label>
  <input type="radio" name="ty01" id="ty0102">
</div>


<div class="radio-group">
  <label for="ty0201">ty0201</label>
  <input type="radio" name="ty02" id="ty0201">
  <label for="ty0202">ty0202</label> 
  <input type="radio" name="ty02" id="ty0202">
</div>


<button type="button" id="btn" class="">button</button>

CSS

.active {
  background: red;
}

JavaScript

// Get references to the radio buttons and result paragraph
var ty0101 = document.getElementById('ty0101');
var ty0201 = document.getElementById('ty0201');
var ty0102 = document.getElementById('ty0102');
var ty0202 = document.getElementById('ty0202');
var btn = document.getElementById('btn');

var radioGroups = document.querySelectorAll('.radio-group');
console.log(radioGroups);

[...radioGroups].forEach((item) => {
  console.log(item)
  var radioGroups = document.querySelectorAll(item);
});


// Add event listeners to the radio buttons
ty0101.addEventListener('change', checkConditions);
ty0102.addEventListener('change', checkConditions);
ty0201.addEventListener('change', checkConditions);
ty0202.addEventListener('change', checkConditions);

// Function to check if both radio buttons are checked
function checkConditions() {
  
  if (ty0101.checked || ty0201.checked) {

    if (ty0101.checked && ty0201.checked) {
      btn.classList.add('active');
    } else {
      btn.classList.remove('active');
    }
  } else {
    btn.classList.remove('active');
  }		
  /* if (ty0101.checked && ty0201.checked) {

                btn.classList.add('active');
            } else if (ty0101.checked || ty0201.checked) {
                btn.classList.remove('active');
            } else {
                btn.classList.remove('active');
            } */
}