根据 html 将 jQuery 代码转换为 javascript

Question

我有 html 和 js 代码。但是 javascript 代码是由 jQuery 编写的，我想将此 jQuery 代码转换为 Javascript：// jquery code$('.hello[type="checkbox"]').on('change', function() {   $(this).siblings('.hello[type="checkbox"]').not(this).prop('checked', false);});和我的 html 标记：<div>    <span>Group 1:</span>    <input type="checkbox" class="group1 hello" />    <input type="checkbox" class="group1 hello" />    <input type="checkbox" class="group1 hello" /></div><div>    <span>Group 2:</span>    <input type="checkbox" class="group2 hello" />    <input type="checkbox" class="group2 hello" />    <input type="checkbox" class="group2 hello" /></div><div>    <span>Group 3:</span>    <input type="checkbox" class="group3 hello" />    <input type="checkbox" class="group3 hello" />    <input type="checkbox" class="group3 hello" /></div>我想将此代码用于复选框输入，我只想检查用户的一个输入查看演示我通过在 html 中更改和添加属性来尝试此代码，但它不适用于我的 questin 中的组function checkOnlyOne(b){var x = document.getElementsByClassName('daychecks');var i;for (i = 0; i < x.length; i++) {  if(x[i].value != b) x[i].checked = false;}}<div>    <span>Group 3:</span>    <input type="checkbox" class="group3 hello" onclick="checkOnlyOne(this.value); />    <input type="checkbox" class="group3 hello" onclick="checkOnlyOne(this.value); />    <input type="checkbox" class="group3 hello" onclick="checkOnlyOne(this.value); /></div>

Answer 1

您可以使用querySelectorAll方法通过 CSS 选择器获取元素。

// jquery code

document.querySelectorAll('.hello[type="checkbox"]').forEach(el => {

  el.addEventListener('change', function() {

    this.parentNode.querySelectorAll('.hello[type="checkbox"]').forEach(el1 => {

      if (el !== el1) el1.checked = false;

    });

  });

});

<div>

  <span>Group 1:</span>

  <input type="checkbox" class="group1 hello" />

  <input type="checkbox" class="group1 hello" />

  <input type="checkbox" class="group1 hello" />

</div>

<div>

  <span>Group 2:</span>

  <input type="checkbox" class="group2 hello" />

  <input type="checkbox" class="group2 hello" />

  <input type="checkbox" class="group2 hello" />

</div>

<div>

  <span>Group 3:</span>

  <input type="checkbox" class="group3 hello" />

  <input type="checkbox" class="group3 hello" />

  <input type="checkbox" class="group3 hello" />

</div>

仅供参考：您可以使用单选按钮实现相同的行为，而无需任何额外的 Javascript 代码，只需为组提供相同的名称属性。

<div>

  <span>Group 1:</span>

  <input type="radio" name="group1" class="group1 hello" />

  <input type="radio" name="group1" class="group1 hello" />

  <input type="radio" name="group1" class="group1 hello" />

</div>