单击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>

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

Answer 2

onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"