复选框在html中无法正常工作如何修复

Question

我有这个复选框输入，我希望它在点击时调用一个函数

<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>

我尝试了不同的方法，唯一能让它工作的方法是在跨度上使用onclick，但如果复选框被选中，那就不起作用了！

有人能帮我吗？

我无法更改布局，因为我有一个固定的HTML，很多复选框都是这样的。

Answer 1

这似乎是用一个简单的"系统(("；作用问题可能出在您的system((函数中。

function system(){
console.log("inside system")
}

<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>

Answer 2

试试这个。首先选择JavaScript中的复选框：

const $checkbox = document.querySelector('.icheck')；

然后添加一个点击事件监听器：

$checkbox.addEventListener('click', system);

单击它时，它将运行系统。