Сделать querySelector только целью ЭТОГО элемента, на который нажали?

Question

У меня есть div, который включает в себя флажок, я хочу, чтобы только querySelector предназначался для дочернего элемента ЭТОГО нажатого элемента. На данный момент, если я нажму на кнопку ниже, это вызовет щелчок на флажке выше. Как я могу это сделать?

HTML

<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck()">
     <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck()">
     <input class="message-checkbox" type="checkbox">
</div>

Javascript

function triggerCheck(){
document.querySelector('.message-checkbox').click();
}

Answer 1

Присоедините прослушиватель событий, используя addEventListener вместо этого - встроенные обработчики имеют слишком много проблем , чтобы их стоило использовать в современной кодовой базе. Чтобы присоединить слушателя, выберите .message-checkbox-container элементы, и вы можете использовать замыкание на каждый элемент для ссылки на его первый дочерний элемент, вход внутри слушателя:

for (const container of document.querySelectorAll('.message-checkbox-container')) {
  container.addEventListener('click', () => {
    container.children[0].click();
  });
}

<div class="message-checkbox-container" style="height: 47px;">container
     <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;">container
     <input class="message-checkbox" type="checkbox">
</div>

Не то, чтобы вы это делали, но вы можете ссылаться на this внутри встроенного обработчика, чтобы получить ссылку на элемент, к которому прикреплен обработчик - вы может передать это в функцию и иметь вызов функции querySelector (или .children[0]):

function triggerCheck(elm) {
  elm.querySelector('.message-checkbox').click();
}

<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck(this)">container
  <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck(this)">container
  <input class="message-checkbox" type="checkbox">
</div>

Вы можете рассмотреть возможность использования <label> вместо <div>, таким образом, флажок будет автоматически переключаться при нажатии метки, нет Javascript необходимо:

.message-checkbox-container {
  display: block;
  cursor: pointer;
}

<label class="message-checkbox-container" style="height: 47px;">container
  <input class="message-checkbox" type="checkbox">
</label>
<label class="message-checkbox-container" style="height: 47px;">container
  <input class="message-checkbox" type="checkbox">
</label>