Как разделить чекбоксы на группы?

Question

[CreativeStory]

Как можно сделать разделение чекбоксов на группы по имени?

Например, есть 2 контейнера/группы. В одном name="tseremonii", в другом name="mesto-provedeniya".

<div class="group">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="10">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="20">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="30">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="40">
    </div>
    <div class="group">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="50">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="60">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="70">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="80">
    </div>

есть код, с помощью которого эмулируется поведение радиокнопки, с возможностью выбора только одного пункта и возможностью деактивировать его(checked = false).

function onlyOne(checkbox) {
            var input_item = document.getElementsByClassName('input_data');

            for (var j = 0; j < input_item.length; j++) {
                
                var checkboxes = document.getElementsByName(input_item[j].name);


                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i] !== checkbox) checkboxes[i].checked = false;
                }
            }
            
        }

Сейчас в результате выполнения кода checked=true прыгает из идной группы в другую, и не получается выбрать в 2-х группах по пункту.
Где в коде находится ошибка?

demo

Comments

[Леонид Князев]

Зачем эмулировать то, что уже есть в HTML?
То, что вы пытаетесь сделать называется радио-кнопка (<input type="radio" />).
Используйте её и тогда вам не надо будет писать для них дополнительный ява-скрипт.

<div class="group">
        <input type="radio" class="input_data" name="tseremonii" value="10">
        <input type="radio" class="input_data" name="tseremonii" value="20">
        <input type="radio" class="input_data" name="tseremonii" value="30">
        <input type="radio" class="input_data" name="tseremonii" value="40">
    </div>
    <div class="group">
        <input type="radio" class="input_data" name="mesto-provedeniya" value="50">
        <input type="radio" class="input_data" name="mesto-provedeniya" value="60">
        <input type="radio" class="input_data" name="mesto-provedeniya" value="70">
        <input type="radio" class="input_data" name="mesto-provedeniya" value="80">
    </div>

demo

[CreativeStory]

Леонид Князев, да что вы говорите) а если внимательно прочитать задачу и понять необходимое решение, которое должно выполняться..

Answer 1

[0xD34F]

Вариант раз - принадлежность к группе устанавливается через значение атрибута name:

function onlyOne(checkbox) {
  for (const n of document.getElementsByName(checkbox.name)) {
    n.checked = n.checked && n === checkbox;
  }
}

Вариант два - принадлежность к группе устанавливается через общий контейнер; а ещё давайте исправим косяки с обработкой событий (вместо click должен быть change, инлайновое подключение обработчика - это не круто):

document.querySelectorAll('.group').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e
  .currentTarget
  .querySelectorAll('input[type="checkbox"]')
  .forEach(n => n.checked = n.checked && n === e.target)
);

Вариант три - гибрид чекбокса и радиокнопки не нужен, заменяете чекбоксы радиокнопками и добавляете ещё одну, которая будет обозначать отсутствие выбора.

Comments

[CreativeStory]

Огромное спасибо!!