javascript - 如何通过单击单选按钮来切换标签的类。需要香草 JS 而不是 JQuery

Question

我尝试在 vanilla js 中编写一个将类添加.active到labelof的函数checked input。
不幸的是，我卡住了，我能够只使用 jquery 编写这个函数。
下面是代码片段。

重要 - html 结构无法更改。不能添加额外的类。输入必须在标签中。
在 vanilla js 中写同样的东西有什么建议吗？我知道我可以inputs一次获得所有内容.querySelector并使用例如forEach，但是当单击任何输入时，它会同时使用两个类form中进行切换。

感谢帮助。

let $fruits = $('.fruits');
let $vege = $('.vege');


const filterToggleActive = function ($filterName) {
 $inputs = $filterName.find('input');
 $inputs.each(function () {
  $(this).on('click', function () {
   $label = $filterName.find('label');
   $label.removeClass('active');
   $currentLabel = $(this).parent('label');
   $currentLabel.addClass('active');
  });
 });
}

filterToggleActive($fruits);
filterToggleActive($vege);

.fruits {
 border: 1px solid red;
 margin: 15px;
}

.vege {
 border: 1px solid green;
 margin: 15px;
}

label {
  font-size: 18px;
  cursor: pointer;
}
.active {
text-decoration: underline;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits">
    <form action="">
      <label><input type="radio" name="food"> Apples</label>
      <label><input type="radio" name="food"> Bananas</label>
      <label><input type="radio" name="food"> Oranges</label>
    </form>
  </div>

  <div class="vege">
    <form action="">
      <label class="active"><input type="radio" name="food">Carrots</label>
      <label><input type="radio" name="food">Tomatos</label>
      <label><input type="radio" name="food"> Potatos</label>
    </form>
  </div>

标签： javascriptonclickradio-button

Answer 1

你可以只用javascript来做到这一点。你会想要的querySelectorAll，就像querySelector第一场比赛一样。

var inputs = document.querySelectorAll("input");
inputs.forEach(function(i){
    i.addEventListener('click', function(el){
        var clicked = el.currentTarget;
        var active = clicked.parentElement.parentElement.querySelector('.active');
        active && active.classList.remove('active');
        clicked.parentElement.classList.add('active');
    });
});

.fruits {
 border: 1px solid red;
 margin: 15px;
}

.vege {
 border: 1px solid green;
 margin: 15px;
}

label {
  font-size: 18px;
  cursor: pointer;
}
.active {
text-decoration: underline;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits">
    <form action="">
      <label><input type="radio" name="food"> Apples</label>
      <label><input type="radio" name="food"> Bananas</label>
      <label><input type="radio" name="food"> Oranges</label>
    </form>
  </div>

  <div class="vege">
    <form action="">
      <label class="active"><input type="radio" name="food">Carrots</label>
      <label><input type="radio" name="food">Tomatos</label>
      <label><input type="radio" name="food"> Potatos</label>
    </form>
  </div>