Click on a div to toggle a checkbox inside of it using javascript

0 votes
asked Feb 25, 2009 by occhiso

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?

6 Answers

0 votes
answered Jan 25, 2009 by alex-barrett
onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"
0 votes
answered Jan 25, 2009 by damien-mcgivern

look into using jQuery rather than programming against the dom yourself. using a library like jQuery means your code is more likely to work on most browsers

http://docs.jquery.com/Effects/toggle

0 votes
answered Jan 25, 2009 by user59200

The root of the problem is that when you click on the checkbox, the click event is propagated up the DOM to parent elements.

So the checkbox handles the click event by toggling itself, and then the DIV receives the click event and toggles the checkbox again.

The simplest solution would be to stop propagation of the event, by adding this to the input element:

onClick="event.stopPropagation();"

While this is defined in the W3C DOM Level 2 Event Model, it may not be supported in all browsers so you may want to use a cross-browser library like Prototype or jQuery to ensure compatibility.

0 votes
answered Feb 25, 2009 by andy-hume

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.

0 votes
answered Jan 18, 2011 by tom-kirkpatrick

Based on some of the previous answers, this is what worked best for me with html like this:

<div class="option_item">
  <input type="checkbox" value="1" checked="checked">
</div>

jQuery like this:

$.fn.toggleCheckbox = function() {
  this.attr('checked', !this.attr('checked'));
}

$(document).ready(function(){
  $(".option_item").click(function (e) {    
    if (e.target.tagName != 'INPUT') {
      $(this).find("input").toggleCheckbox();
      return false;
    }
  });
);
0 votes
answered Jan 9, 2016 by ashwin

Here is my implementation of checkbox for div

Link:https://codepen.io/ashwinshenoy/pen/oYXqMV

       <div id="checkboxes">
            <input type="checkbox" name="rGroup" class="check_cat" value="Adventure Sports" id="r1"/>
            <div class="check_overlay">
                <i class="fa fa-check-circle"></i>
            </div>
            <label class="whatever" for="r1">
                <img src="http://i.imgur.com/SfQVTlR.png" class=" img-responsive width100" />
                <div class="row">
                    <div class="col-xs-offset-3 col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-user"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                    <div class="col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-bitbucket"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                </div><!--inner row end-->
            </label>
            <br>
            <div class="check_name_div">
                Adventure Sports
            </div>
        </div><!--checkboxes end-->

CSS and JS in codepen updated

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...