Как определить принадлежность элемента по data value?

Question

[CreativeStory]

Как можно по data value определить принадлежность чекбокса и в зависимости к какой группе он принадлежит производить действие.
Сейчас скрипт эмулирует поведение радиокнопки, но это поведение распространяется на все группы, а нужно разделить, как если бы были нативные радиокнопки с одним именем в группе, типа:

<div class="group">
  <input type="radio" name="one">
  <input type="radio" name="one">
  <input type="radio" name="one">
</div>
<div class="group">
  <input type="radio" name="two">
  <input type="radio" name="two">
  <input type="radio" name="two">
</div>

к сожалению бекэнд уже реализован и нельзя задать нативное поведение.

есть такой код:

<div class="group">
        <input type="checkbox" name="test_name-1" class="input_data radio" data-group="tseremonii" onclick="onlyOne(this)" value="10">
        <input type="checkbox" name="test_name-2" class="input_data radio plus-person" data-group="tseremonii" onclick="onlyOne(this)" value="20">
        <input type="checkbox" name="test_name-3" class="input_data radio" data-group="tseremonii" onclick="onlyOne(this)" value="30">
        <input type="checkbox" name="test_name-4" class="input_data radio" data-group="tseremonii" onclick="onlyOne(this)" value="40">
    </div>
    <div class="group">
        <input type="checkbox" name="test_name-5" class="input_data radio" data-group="fotografy" onclick="onlyOne(this)" value="10">
        <input type="checkbox" name="test_name-6" class="input_data radio plus-person" data-group="fotografy" onclick="onlyOne(this)" value="20">
        <input type="checkbox" name="test_name-7" class="input_data radio" data-group="fotografy" onclick="onlyOne(this)" value="30">
        <input type="checkbox" name="test_name-8" class="input_data radio" data-group="fotografy" onclick="onlyOne(this)" value="40">
    </div>
    
<script>
function onlyOne(item) {
            let radio_class = document.getElementsByClassName('radio');


            for (let i = 0; i < radio_class.length; i++) {
                
                let data_group = radio_class[i].getAttribute('data-group');
             

                if (data_group) {
                    if (radio_class[i] !== item) {
                        radio_class[i].checked = false;
                    } 
                }
                
            }


        }
</script>

Answer 1

[0xD34F]

function onlyOne({ value, dataset: { group } }) {
  document.querySelectorAll(`[data-group="${group}"]`).forEach(n => {
    n.checked = n.checked && n.value === value;
  });
}

Comments

[CreativeStory]

еще раз благодарю вас!
может что посоветуете почитать? я даже не нагуглил примерно такого решения((

[0xD34F]

CreativeStory, не надо ничего гуглить, достаточно знать про селекторы атрибутов, и что querySelectorAll умеет с ними работать.

Answer 2

[Дмитрий]

function onlyOne(item) {
    Array.from(item.parentElement.getElementsByClassName('radio')).forEach(
        el => el.checked = el === item
    );
}

Comments

[CreativeStory]

Спасибо большое!