<p><code>Checkboxes</code> in <code>HTML</code> forms don't have implicit <em>labels</em> with them. Adding an explicit label (some text) next to it doesn't toggle the <code>checkbox</code>.</p>

<p><strong>How do I make a checkbox toggle from clicking on the text label as well?</strong></p>

[{'answer_id': 2133, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 6, 'selected': False, 'text': '<p>If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.</p>\n\n<pre><code>&lt;label for="surname"&gt;Surname&lt;/label&gt;\n&lt;input type="checkbox" name="surname" id="surname" /&gt;\n</code></pre>\n\n<p>The <em>for</em> attribute on the label element links to the <em>id</em> attribute on the input element and the browser does the rest.</p>\n\n<p>This has been testing to work in:</p>\n\n<ul>\n<li>IE6</li>\n<li>IE7</li>\n<li>Firefox</li>\n</ul>\n'}, {'answer_id': 2177, 'author': 'Michiel de Mare', 'author_id': 136, 'author_profile': 'https://Stackoverflow.com/users/136', 'pm_score': 2, 'selected': False, 'text': '<p>You can wrap your checkbox in the label:</p>\n\n<pre><code>&lt;label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px"&gt;\n  &lt;input type="checkbox" name="surname"&gt;\n&lt;/label&gt;\n</code></pre>\n'}, {'answer_id': 2180, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 2, 'selected': False, 'text': '<p>Ronnie,</p>\n\n<p>If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:</p>\n\n<pre><code>&lt;label for="surname"&gt;\n    Surname\n    &lt;input type="checkbox" name="surname" id="surname" /&gt;\n&lt;/label&gt;\n</code></pre>\n'}, {'answer_id': 2184, 'author': 'Ronnie', 'author_id': 193, 'author_profile': 'https://Stackoverflow.com/users/193', 'pm_score': -1, 'selected': False, 'text': '<p>Wrapping with the label still doesn\'t allow clicking \'anywhere in the box\' - still just on the text!\nThis does the job for me:</p>\n\n<pre><code>&lt;div onclick="dob.checked=!dob.checked" class="checkbox"&gt;&lt;input onclick="checked=!checked" id="dob" type="checkbox"/&gt;Date of birth entry must be completed&lt;/div&gt;\n</code></pre>\n\n<p>but unfortunately has lots of javascript that is effectively toggling twice.</p>\n'}, {'answer_id': 2223, 'author': 'Mat', 'author_id': 48, 'author_profile': 'https://Stackoverflow.com/users/48', 'pm_score': 6, 'selected': True, 'text': '<p>Set the CSS <code>display</code> property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.</p>\n\n<p>For example:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>label {\r\n  width: 100px;\r\n  height: 100px;\r\n  display: block;\r\n  background-color: #e0e0ff;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="test"&gt;\r\n  A ticky box! &lt;input type="checkbox" id="test" /&gt;\r\n&lt;/label&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 26228, 'author': 'Euro Micelli', 'author_id': 2230, 'author_profile': 'https://Stackoverflow.com/users/2230', 'pm_score': 2, 'selected': False, 'text': '<p>As indicated by @Gatekiller and others, the correct solution is the &lt;label&gt; tag.</p>\n\n<p>Click-in-the-text is nice, but there is another reason to use the &lt;label&gt; tag: accessibility. The tools that visually-impaired people use to access the web need the &lt;label&gt;s to read-out the meaning of checkboxes and radio buttons. Without &lt;label&gt;s, they have to guess based on surrounding text, and they often get it wrong or have to give up. </p>\n\n<p>It is very frustrating to be faced with a form that reads <em>"Please select your shipping method, radio-button1, radio-button2, radio-button3".</em></p>\n\n<p>Note that web accessibility is a complex topic; &lt;label&gt;s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.</p>\n'}, {'answer_id': 28941729, 'author': 'The_HTML_Man', 'author_id': 4507071, 'author_profile': 'https://Stackoverflow.com/users/4507071', 'pm_score': -1, 'selected': False, 'text': '<p>this should work:</p>\n\n<pre><code>&lt;script&gt;\nfunction checkbox () {\n    var check = document.getElementById("myCheck").checked;\n    var box = document.getElementById("myCheck")\n\n    if (check == true) {\n        box.checked = false;\n    }\n    else if (check == false) {\n        box.checked = true;\n    }\n}\n&lt;/script&gt;\n&lt;input type="checkbox"&gt;&lt;p id="myCheck" onClick="checkbox();"&gt;checkbox&lt;/p&gt;\n</code></pre>\n\n<p>if it doesnt, pleae corect me!</p>\n'}, {'answer_id': 32331279, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 2, 'selected': False, 'text': '<p>You need to just wrap the checkbox in label tag just like this</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;label style="height: 10px; width: 150px; display: block; "&gt;\n      [Checkbox Label Here] &lt;input type="checkbox"/&gt;\n     &lt;/label&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p><a href="http://jsfiddle.net/w0zb4df3/" rel="nofollow noreferrer">FIDDLE</a></p>\n<p>or you can also use the <strong>for</strong> attribute of label and <strong>id</strong> of your checkbox like below</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="other"&gt;Other Details&lt;/label&gt;\n    &lt;input type="checkbox" id="other" /&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p><a href="http://jsfiddle.net/Lffnf7su/" rel="nofollow noreferrer">FIDDLE</a></p>\n'}]
['https://Stackoverflow.com/questions/2123', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/193/']