Преобразовать jQuery код в javascript в зависимости от html

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, но не работает для группы в моем квесте

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>