CODEWITHSUNDEEP
javascriptjquerycheckbox
theGreenCabbage
theGreenCabbage

Reputation: 4845

Setting boolean variable when checkbox is clicked

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

Upvotes: 2

Views: 2406

Answers (6)

Herman Neple
Herman Neple

Reputation: 156

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.

Upvotes: 0

Michael Santos
Michael Santos

Reputation: 11

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

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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/

Upvotes: 5

PeterKA
PeterKA

Reputation: 24638

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>

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

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

Upvotes: 0

Joy Biswas
Joy Biswas

Reputation: 6527

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

Upvotes: 1

Related Questions