点击一个div来切换它内部的复选框使用JavaScript

问题描述

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

我有一个div，里面有一个复选框，并且希望整个div切换复选框。这是我到目前为止：

 < div style =padding：2em; border：1px solid$ b $ （on）=if（document.getElementById（'cb'）。checked）document.getElementById（'cb'）。checked = false; else document.getElementById（'cb'）。checked = true;> 
< input name =cbid =cbtype =checkbox> 
< / div> 
  

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

任何想法？

解决方案

以更强大和更易于访问的方式使用标签元素来包装您想要点击的区域。

例如：

 < label for =cb > 
< div style =padding：2em; border：1px solid> 
< input name =cbid =cbtype =checkbox> 
< / div> 
< / label> 
  

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

This seems to be a simple problem, but I dont use alot of javascript.

I have a div, with a checkbox in it, and would like the whole div to toggle the checkbox. This is what I have so far:

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

Only problem is when you click the actual checkbox, it get toggled twice, and therefore doesn't change.

Any ideas?

解决方案

It's possible you could implement this in a more robust and accessible way by using the label element to wrap the area you want to click.

For example:

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

I haven't tested the above code, but I believe all browsers support clicking of labels to check an input box.

这篇关于点击一个div来切换它内部的复选框使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！