javascript - 单击一个 div 以使用 javascript 在其中切换一个复选框

Question

这似乎是一个简单的问题，但我并没有使用很多javascript。

我有一个 div，里面有一个复选框，我希望整个 div 都能切换复选框。这是我目前所拥有的:

<div style="padding: 2em; border: 1px solid"
     onClick="if (document.getElementById('cb').checked) document.getElementById('cb').checked=false; else document.getElementById('cb').checked=true;">
  <input name="cb" id="cb" type="checkbox">
</div>

唯一的问题是当您点击实际的复选框时，它会切换两次，因此不会改变。

有什么想法吗？

Answer 1

您可以通过使用 label 元素包裹您要单击的区域，以更稳健和更易于访问的方式实现这一点。

例如:

<label for="cb">
    <div style="padding: 2em; border: 1px solid">
        <input name="cb" id="cb" type="checkbox">
    </div>
</label>

我没有测试过上面的代码，但我相信所有的浏览器都支持点击标签来检查输入框。