根据 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 codedocument.querySelectorAll('.hello[type="checkbox"]').forEach(el => {&nbsp; el.addEventListener('change', function() {&nbsp; &nbsp; this.parentNode.querySelectorAll('.hello[type="checkbox"]').forEach(el1 => {&nbsp; &nbsp; &nbsp; if (el !== el1) el1.checked = false;&nbsp; &nbsp; });&nbsp; });});<div>&nbsp; <span>Group 1:</span>&nbsp; <input type="checkbox" class="group1 hello" />&nbsp; <input type="checkbox" class="group1 hello" />&nbsp; <input type="checkbox" class="group1 hello" /></div><div>&nbsp; <span>Group 2:</span>&nbsp; <input type="checkbox" class="group2 hello" />&nbsp; <input type="checkbox" class="group2 hello" />&nbsp; <input type="checkbox" class="group2 hello" /></div><div>&nbsp; <span>Group 3:</span>&nbsp; <input type="checkbox" class="group3 hello" />&nbsp; <input type="checkbox" class="group3 hello" />&nbsp; <input type="checkbox" class="group3 hello" /></div>仅供参考：您可以使用单选按钮实现相同的行为，而无需任何额外的 Javascript 代码，只需为组提供相同的名称属性。<div>&nbsp; <span>Group 1:</span>&nbsp; <input type="radio" name="group1" class="group1 hello" />&nbsp; <input type="radio" name="group1" class="group1 hello" />&nbsp; <input type="radio" name="group1" class="group1 hello" /></div>