Как выбрать первый подходящий input при загрузке страницы?

Question

[Арсений]

Имеем следующий код

<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-1">
        <input type="radio" name="group-1" data-prop="prop1">
        <input type="radio" name="group-1" data-prop="prop1">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
    </div>
</div>
<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-3">
        <input type="radio" name="group-3">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-4">
        <input type="radio" name="group-4" data-prop="prop4">
        <input type="radio" name="group-4" data-prop="prop4">
    </div>
</div>
<div class="group-options__item">
    <input type="radio" name="group-5">
    <input type="radio" name="group-5" data-prop="prop5">
    <input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
    <input type="radio" name="group-6" data-prop="prop6">
    <input type="radio" name="group-6" data-prop="prop6">
</div>

Как видно из него есть group-options__item, которые содержат радиобаттоны, а также сами они могут быть потомками group-options, а могут не быть. Также у некоторых радиобаттонов есть дата атрибут data-prop.
Вопрос такой, как сделать так, чтобы при загрузке страницы в group-options__item выбирался первый элемент, имеющий data-prop, но при этом если group-options__item является потомком group-options, то первый подходящий элемент выбирался не среди только одного group-options__item, а среди всех таких блоков, принадлежащих одному group-options.

То есть в итоге чтобы было так (на примере первого кода):

<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-1">
        <input type="radio" name="group-1" data-prop="prop1" checked>
        <input type="radio" name="group-1" data-prop="prop1">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
    </div>
</div>
<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-3">
        <input type="radio" name="group-3">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-4">
        <input type="radio" name="group-4" data-prop="prop4" checked>
        <input type="radio" name="group-4" data-prop="prop4">
    </div>
</div>
<div class="group-options__item">
    <input type="radio" name="group-5">
    <input type="radio" name="group-5" data-prop="prop5" checked>
    <input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
    <input type="radio" name="group-6" data-prop="prop6" checked>
    <input type="radio" name="group-6" data-prop="prop6">
</div>

На данный момент я могу находить нужный мне радиобаттон и делать его выбранным внутри только одного group-options__item, но не могу выбрать только один нужный, если они находятся в group-options.

const wrappers = document.querySelectorAll('.group-options__item');

const selectNoEmptyButton = wrapper => {
  const elements = wrapper.querySelectorAll('input[type="radio"]');
  const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-prop'));

  notEmptyElement.setAttribute('checked', 'checked');
};

[...wrappers].forEach(wrapper => selectNoEmptyButton(wrapper));

Answer 1

[0xD34F]

document.querySelectorAll('.group-options__item').forEach(n => {
  const input = (n.closest('.group-options') ?? n).querySelector('[data-prop]');
  if (input) {
    input.checked = true;
  }
});

Comments

[Арсений]

спасибо!