点击一个div,使用javascript切换其中的一个复选框

前端之家收集整理的这篇文章主要介绍了点击一个div,使用javascript切换其中的一个复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这似乎是一个简单的问题,但我不会使用大量的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>

只有当您点击实际复选框时,才能切换两次,因此不会改变。

有任何想法吗?

解决方法

您可以通过使用标签元素来包装您想要点击的区域,这样可以实现这个更强大和可访问的方式。例如。
<label for="cb">
    <div style="padding: 2em; border: 1px solid">
        <input name="cb" id="cb" type="checkBox">
    </div>
</label>

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

原文链接:https://www.f2er.com/css/218103.html

猜你在找的CSS相关文章