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

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

• javascript
• jquery
• checkbox

• you should try $(this).is(':checked') instead of this.checked – 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 Commented Aug 18, 2015 at 20:12
• let me create a quick jsfiddle – Sushil Commented Aug 18, 2015 at 20:13
• i didn't notice that full was your div id. @maximillan's answer is correct – Sushil Commented Aug 18, 2015 at 20:22

6 Answers 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./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/qtczor1q/2/

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

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

$('#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./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>

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./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>

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.