仅使querySelector定位被单击的THIS元素?

问题描述 投票:1回答:1

我有一个包含复选框的div,我只想让querySelector定位到此clicked元素的子元素。截至目前,如果我单击下面的一个,它将触发对上面复选框的单击。我怎样才能做到这一点?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();
}
javascript jquery html css
1个回答
0
投票

改为使用addEventListener附加事件侦听器-内联处理程序具有way too many problems值得在现代代码库中使用。要附加侦听器,请选择.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>
© www.soinside.com 2019 - 2024. All rights reserved.