JavaScript cannot check checkbox

Question

This is my code: https://jsfiddle.net/56xh3rLo/

Here is the javascript from the jsfiddle:

$(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('.menu').length) { //line 2
            if ($('.menu-btn').is(':checked')) { //line 3
                $('.menu-btn').trigger('click'); //line 4
            }
        }        
    })
})

as you can see, line 1 is to detect if a user is going to click on the page. line 2 is to detect if the user clicks on anywhere EXCEPT for the .menu element (which is anywhere in the black background). Line 3 is to detect if the .menu-btn checkbox is checked. if it is checked, it will trigger a click on the checkbox.

So, here is the summary of the code: if the user clicks on anywhere EXCEPT for the black box area and the checkbox IS checked, the code will trigger a click on the checkbox and it will uncheck the checkbox. the problem is, the checkbox does not even check at all. why is it not working?

Your handler is setup to trigger a click on the checkbox every time it's checked...so you're immediately unchecking it. — André Dion
– André Dion, Commented Oct 14, 2016 at 18:15
@Rayon now i can check the checkbox BUT i cannot uncheck the checkbox when i click somewhere outside of the black box area. — pixie123
– pixie123, Commented Oct 14, 2016 at 18:15

Nick G · Accepted Answer · 2016-10-14 18:32:16Z

5

You want to change your outer if check to

if(!$(event.target).closest('.menu').length && !$(event.target).hasClass('menu-btn')) {

The way you're doing it now is seeing if the click target has an ancestor with the .menu class, but if you click the checkbox, it will not have that ancestor. This means the outer if check will pass, then the inner if check will pass because the click you just did checked the box. That will run the line

$('.menu-btn').prop( "checked", false );

Here's the working example.

edited Oct 14, 2016 at 18:32

answered Oct 14, 2016 at 18:23

Nick G

1,98314 silver badges17 bronze badges

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

6 Comments

JCall-Engineer Over a year ago

I do believe this is the answer the OP is looking for

pixie123 Over a year ago

Yes, thanks it worked but look here: jsfiddle.net/56xh3rLo/7 I want to click on the label and check the checkbox. that works. but i cannot uncheck the checkbox is the label. how do i fix this?

Nick G Over a year ago

You want to click the label to check or uncheck the checkbox?

pixie123 Over a year ago

exactly. I want to click the label to check and uncheck the checkbox. I ALSO want to uncheck the checkbox if the checkbox is checked and if the user clicks anywhere EXCEPT for black area box.

Nick G Over a year ago

Yep it looks like you got it, nice job.

|

darrylyeo · Accepted Answer · 2016-10-14 18:15:46Z

2

The proper way to uncheck a checkbox with jQuery:

$('.menu-btn').prop( "checked", false );

answered Oct 14, 2016 at 18:15

darrylyeo

3,52323 silver badges31 bronze badges

2 Comments

pixie123 Over a year ago

oh i didn't know that but it still doesn't work: jsfiddle.net/56xh3rLo/2

JCall-Engineer Over a year ago

@pixie123 your jsfiddle seems to be doing exactly what it should to me. When you click on the checkbox, it's not in the menu. It is now checked, so your javascript unchecks it.

Alexander Heimbuch · Accepted Answer · 2016-10-14 18:52:58Z

0

A bit expressive, but I hope it will be more clear to the reader:

$(document).ready(function() {
  var $window = $(window);
  var $btn = $('.menu-btn');

  $window.on('click', function (event) {
    var $target = $(event.target);

    if($target.is($btn)) {
      return;
    }

    if($btn.is(':checked') === false) {
      return;
    }

    if ($target.closest('.menu').length > 0) {
      return;
    }

    $btn.prop('checked', false);

  });
});

answered Oct 14, 2016 at 18:52

Alexander Heimbuch

6779 silver badges14 bronze badges

Collectives™ on Stack Overflow

JavaScript cannot check checkbox

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related