 <p>You could do the following. This would set up the toggle function to fire on click of any label with the class <code>toggle</code>. It would look for the div and checkbox directly within that label.</p> <p>HTML:</p> <pre><code>&lt;label class="toggle" for="color_Black"&gt;&lt;div style="background-color: #000000" class="color"&gt;&lt;div class=CheckMark&gt;&amp;#10003;&lt;/div&gt; &lt;input type="checkbox" name="color[]" value="Black" id="Checkbox1" class="cbx"/&gt;&lt;/div&gt;Black&lt;/label&gt; </code></pre> <p>JS:</p> <pre><code>$(".toggle").on("click", function toggle_colorbox() { $div = $(this).children('div'); $cb = $(this).find('input'); $innerdiv = $div.find('div'); if (!$cb.is(':checked')) { $innerdiv.show(); $div.addClass("ColorboxSelected"); $cb.prop('checked', true); } else { $innerdiv.hide(); $div.removeClass("ColorboxSelected"); $cb.prop('checked', false); } return false; }); </code></pre> <p>Fiddle: <a href="http://jsfiddle.net/aLJwH/1/" rel="nofollow">http://jsfiddle.net/aLJwH/1/</a></p> <p>EDIT: Answer now featuring working code!</p>