时间戳

首页 > 解决方案 > 如何在不使用事件监听器的情况下检查单击的元素？

javascript - 如何在不使用事件监听器的情况下检查单击的元素？

问题描述

我有一个输入单选按钮列表，总共 25 个，具有以下 html 结构：

<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>

如何在不添加 25 个事件侦听器的情况下检查哪个输入被检查 - 每个输入一个？以及如何检查每个输入事件？

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

这基本上是我需要的，但更普遍。

标签： javascript

解决方案

它们的容器都是.options-list，因此您可以使用选择器.options-list input:checked来选择已检查的输入，这些输入是具有options-list类的元素的后代：

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>

推荐阅读