How to check for clicked element without using eventlistener?

Question

I have a list of input radio buttons, 25 in total, with following html structure:

<div class="options-list nested">
    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[15]" id="options_15_2" value="78">
        <label class="label admin__field-label" for="options_15_2">
            <span>1</span>
        </label>
    </div>

    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[16]" id="options_16_2" value="79">
        <label class="label admin__field-label" for="options_16_2">
            <span>2</span>
        </label>
    </div>

    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[17]" id="options_17_2" value="80">
        <label class="label admin__field-label" for="options_17_2">
            <span>3</span>
        </label>
    </div>

   ...
</div>

How can I check which input is checked without adding 25 eventlistener - one for each input? And how to check that on every input event?

document.querySelector('#options_16_2').checked;

That is basically what I need, but more general.

Does this answer your question? [Adding an event listener to an element that doesn't exist yet in vanilla javascript](https://stackoverflow.com/questions/30601620/adding-an-event-listener-to-an-element-that-doesnt-exist-yet-in-vanilla-javascr) — Elias Soares, Apr 28 '20 at 23:43
@eliassoares how is that question relevant to this one? There is no suggestion that this HTML is dynamically generated by JS. — Robin Zigmond, Apr 28 '20 at 23:45

score 4 · Accepted Answer · answered Apr 28 '20 at 23:44

The container for all of them is .options-list, so you can use the selector .options-list input:checked to select checked inputs which are a descendant of an element with an options-list class:

document.querySelector('button').addEventListener('click', () => {
  console.log(
    [...document.querySelectorAll('.options-list input:checked')]
      .map(input => input.value)
  );
});

<div class="options-list nested">
    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[15]" id="options_15_2" value="78">
        <label class="label admin__field-label" for="options_15_2">
            <span>1</span>
        </label>
    </div>

    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[16]" id="options_16_2" value="79">
        <label class="label admin__field-label" for="options_16_2">
            <span2</span>
        </label>
    </div>

    <div class="field choice admin__field admin__field-option">
        <input type="radio" class="radio admin__control-radio required" name="options[17]" id="options_17_2" value="80">
        <label class="label admin__field-label" for="options_17_2">
            <span>3</span>
        </label>
    </div>
</div>

<button>check</button>

thanks so much! I was looking for something like this – Klaxx Apr 28 '20 at 23:58 — Klaxx, Apr 28 '20 at 23:58

How to check for clicked element without using eventlistener?

1 Answers1