Click on a div to toggle a checkbox inside of it using 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?

JEEVAN GEORGE ANTONY · Accepted Answer · 2017-09-11 12:10:04Z

43

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.

edited Sep 11, 2017 at 12:10

JEEVAN GEORGE ANTONY

1861 gold badge6 silver badges22 bronze badges

answered Feb 25, 2009 at 0:29

Andy Hume

42k10 gold badges51 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

occhiso Over a year ago

Im fairly new to web stuff, and I've actually never used <label for="">. If it is neater than having an onClick attribute on both the <div> and the <input> that could be good, but im not sure how to use this.

occhiso Over a year ago

I just read a related article which explains it here: stackoverflow.com/questions/2123/… Thanks, I think I'll experiment with this.

Zack The Human Over a year ago

You can even put the style attributes into the label element itself and trash the div altogether.

occhiso Over a year ago

I cant seem to get the label to span across the whole <div>, it only spans across the actual label of the checkbox. I actually intend to have an image inside of the div as well as the checkbox, but cant get the label to cover all of this. Thanks anyway, that would have been cleaner.

occhiso Over a year ago

I needed display: block; and replaced the div with the label: <label for="test" style="padding: 15px; border: 1px solid; display: block; background-color: #e0e0ff;"> <img src="bla.gif" /><br /> <input type="checkbox" id="test" />A ticky box! </label>

|

Alex Barrett · Accepted Answer · 2009-02-25 00:18:00Z

7

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

answered Feb 25, 2009 at 0:18

Alex Barrett

16.5k4 gold badges54 silver badges52 bronze badges

3 Comments

occhiso Over a year ago

Thanks, I knew it would something simple like that! I did a similar thing, but stuffed it up :)

Stuart Clarke Over a year ago

I know this is year late, but I think this is the best answer since it covers more situations. If you wanted to make a <TR> element clickable the label method wouldn't work, whereas this certainly does.

Luciano Bellofatto Over a year ago

Of course always try to avoid inline code but thank you! This was very useful!

Tom Kirkpatrick · Accepted Answer · 2011-05-18 16:47:53Z

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

answered May 18, 2011 at 16:47

Tom Kirkpatrick

1311 silver badge3 bronze badges

Comments

user59200 · Accepted Answer · 2009-02-25 03:52:23Z

1

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.

answered Feb 25, 2009 at 3:52

user59200

4143 silver badges2 bronze badges

Comments

Damien McGivern · Accepted Answer · 2009-02-25 00:39:00Z

0

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

answered Feb 25, 2009 at 0:39

Damien McGivern

4,0343 gold badges29 silver badges21 bronze badges

Comments

Ashwin · Accepted Answer · 2016-11-09 06:05:35Z

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

Waruna Manjula · Accepted Answer · 2021-05-26 04:43:13Z

Try,

.switch_ {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch_ input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff2626;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switch_slider {
  background-color: #12e4a0;
}

input:focus + .switch_slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switch_slider.round {
  border-radius: 34px;
}

.switch_slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div align="center"><label class="switch_">
  <input type="checkbox" id="size_act">
  <span class="switch_slider round"></span>
</label> 
</div>
<div align="center" onClick="$('#size_act').click();">Inactive / Active</div>

Collectives™ on Stack Overflow

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

7 Answers 7

7 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related