我有一个包含复选框的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();
}
改为使用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>