单击div以使用javascript切换其中的复选框

Question

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?

Answer 1

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.

Answer 2

onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"

Answer 3

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;
    }
  });
);

Answer 4

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.

Answer 5

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

Answer 6

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