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

Question

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

重要 - html 结构无法更改。 不能添加额外的类。 输入必须在标签中。
任何建议在香草 js 中编写相同的内容？ 我知道我可以通过.querySelector一次获取所有inputs并使用例如forEach但是当点击任何输入时，它会同时form两种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>

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>