Setting boolean variable when checkbox is clicked

Question

I got some HTML like so of a Bootstrap checkbox. By default the checkbox is on.

    <div id="full" class="checkbox">
        <label>
            <input type="checkbox" checked=""> Include Full Classes
        </label>
    </div>

I have this jQuery which detects whether the item is checked or non-checked

        var full;
        $('#full').change(function(){
            if(this.checked)
            {
                full = true;
                console.log(full);
            } else {
                full = false;
                console.log(full);
            }
        });

What I want to achieve is, when the checkbox is selected, it would set full to 1, and if it is unselected, set full to 0.

I performed console.log() to the full variable, and in my output, all I got was false.

I am wondering what I am doing wrong?

This is the thread I am referencing

you should try $(this).is(':checked') instead of this.checked — Sushil
– Sushil, Commented Aug 18, 2015 at 20:11
@Sushil still appears to only say false. I was if the HTML checked has to do with it. — theGreenCabbage
– theGreenCabbage, Commented Aug 18, 2015 at 20:12
i didn't notice that full was your div id. @maximillan's answer is correct — Sushil
– Sushil, Commented Aug 18, 2015 at 20:22

Maximillian Laumeister · Accepted Answer · 2015-08-18 20:50:24Z

6

You will need to give your checkbox its own ID so that you can determine whether it's checked. Right now you are testing whether the div is checked (which isn't possible) - what you want to do instead is check whether the input element is checked!

Working Live Demo:

var full;
$('#checkbox').change(function() {
  full = this.checked;
  console.log(full);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="full" class="checkbox">
  <label>
    <input id="checkbox" type="checkbox" checked="">Include Full Classes
  </label>
</div>

JSFiddle Example: https://jsfiddle.net/qtczor1q/2/

edited Aug 18, 2015 at 20:50

answered Aug 18, 2015 at 20:13

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

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

6 Comments

tymeJV Over a year ago

How does a div have a change event?

Maximillian Laumeister Over a year ago

@tymeJV I really don't know, to be honest. I changed OP's example a minimal amount until I got it working for the answer, and I'm just now going back over it for clarity / best practices. I just edited it to do a checkbox change event instead though, thanks for raising the question.

tymeJV Over a year ago

Yeah - I thought it was weird it worked... wonder if that checkbox change event bubbled up to the div?

Maximillian Laumeister Over a year ago

@tymeJV Looks like it did bubble up. More info here: api.jquery.com/change

tymeJV Over a year ago

Good to know - you can also use this.checked inside the change handler, rather than recreating the same selector :D. Or to really shorten it: $('#checkbox').change(function() { full = this.checked; console.log(full); });

|

Joy Biswas · Accepted Answer · 2015-08-18 20:12:41Z

1

The output for this.checked is boolean should do the trick

var full;
$('#full').change(function(){
   full = this.checked  ? 1 : 0 ; 
   //or using jquery 
   // full = $(this).is(':checked') ? 1 : 0;
   console.log(full);
});

answered Aug 18, 2015 at 20:12

Joy Biswas

6,5631 gold badge27 silver badges50 bronze badges

Comments

Michael Santos · Accepted Answer · 2017-10-06 14:09:23Z

1

First set all unchecked to false.

 var $checked = $(':checkbox');
    $checked.not(':checked').attr('value', 'false');
    $checked.change(function(){
        $clicked = $(this); 
        $clicked.attr('value', $clicked.is( ":checked" ));
    });

answered Oct 6, 2017 at 14:09

Michael Santos

111 bronze badge

Comments

Paul Roub · Accepted Answer · 2015-08-18 20:16:49Z

0

$('#full') isn't the checkbox, it's the div. You want to look at the checkbox within the div.

var full;

var cb = $('#full input[type=checkbox]');

cb.change(function() {
  if (cb.prop('checked')) {
    full = true;
    console.log(full);
  } else {
    full = false;
    console.log(full);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="full" class="checkbox">
  <label>
    <input type="checkbox" checked="">Include Full Classes
  </label>
</div>

answered Aug 18, 2015 at 20:16

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Comments

PeterKA · Accepted Answer · 2015-08-18 20:44:51Z

0

Using an if statement looks like overkill to me. As @joyBlanks has correctly pointed out, if what you're looking for is true or false then this.checked is all you need. But if you want 1 or 0 then use the ternary operator.

$(':checkbox').on('change', function() {
    console.log( this.checked ); //true or false
    console.log( this.checked ? 1 : 0 ); //1 or 0
})
//trigger change event when the page loads -- checkbox is checked when page loads
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="full" class="checkbox">
        <label>
            <input type="checkbox" checked=""> Include Full Classes
        </label>
    </div>

answered Aug 18, 2015 at 20:44

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Herman Neple · Accepted Answer · 2018-02-21 22:10:01Z

0

If I were to do this, I would honestly just not use JQuery. Just do it simple.

document.getElementById("checkboxId").checked;

If you do not need to use JQuery, just use this variable.

answered Feb 21, 2018 at 22:10

Herman Neple

15612 bronze badges

Collectives™ on Stack Overflow

Setting boolean variable when checkbox is clicked

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related