选中子输入框时切换DIV背景的实现方案

问题描述 #

我有多个以DIV形式呈现的单选按钮，需求如下：

• 选中DIV内的input单选元素时，将该DIV的背景（或类名）改为蓝色
• 选中同name组的其他选项时，原选中的DIV背景恢复为白色

我曾尝试使用.focusin或.focusout方法，但样式仅作用于input单选按钮本身，无法影响外层的DIV。比如选中“80s”选项时，需要给对应的外层DIV添加类或者直接修改背景为蓝色。

解决方案（已修复） #

JavaScript 代码 #

const allFormGroups = document.querySelectorAll('.questionGroup');

allFormGroups.forEach(questionGroup => {

  questionGroup.addEventListener('change', (evt) => {

    evt.currentTarget
      .querySelectorAll('.questionclass-selected')
      .forEach(element => {
        element.classList.remove('questionclass-selected')
      });

    evt.target
      .closest('.form-check')
      .classList.add('questionclass-selected');

  }, true);

});

CSS 样式 #

.questionclass {
  border-radius: var(--bs-border-radius-pill)!important;
  color: #fff!important;
  background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1))!important;
}

.questionclass-selected {
  border-radius: var(--bs-border-radius-pill)!important;
  color: #000!important;
  background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1))!important;
}

.active {
  color: red;
  background-color: yellow;
}

HTML 结构 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>entr-radio-buttons</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
  <div class="container">
    <p class="fs-2 text-primary">Hello music lover</p>
    <div class="questionGroup">
      <p>Which music genre you prefer?</p>
      <div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-1" name="musicgenre"><label class="form-check-label" for="formCheck-1" name="musicgenre">70s</label></div>
      <div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-2" name="musicgenre" selected=""><label class="form-check-label" for="formCheck-2" name="musicgenre">80s</label></div>
      <div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-4" name="musicgenre"><label class="form-check-label" for="formCheck-4" name="musicgenre">90s</label></div>
    </div>
    <div class="questionGroup">
      <p>What kind of music you like?</p>
      <div class="form-check border rounded-pill questionclass" name="musictype"><input class="form-check-input" type="radio" id="formCheck-3" name="musictype"><label class="form-check-label" for="formCheck-3" name="musictype">Classical</label></div>
      <div class="form-check border rounded-pill questionclass" name="musictype"><input class="form-check-input" type="radio" id="formCheck-5" name="musictype"><label class="form-check-label" for="formCheck-5" name="musictype">Pop</label></div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/_questionToggle.js"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Christine BV