Get input checkbox toggle state with Jquery

Question

I would like that whenever you click on a checkbox, a value is printed to the console that corresponds to the state of the checkbox (on/off). I know there are threads with similar titles but all those I've seen don't have clear examples.

Here's what I got so far (Turn on Console and click Add library, JQuery1.8.3):

Attempt 1

This only prints when the page is loaded, I want it to print whenever I click on it.

Attempt 2

This snippet toggles an on and off value whenever I click on the checkbox, but the box doesn't display the tick symbol anymore when it is toggled on.

Why are you loading two versions of jQuery in your examples? — j08691
– j08691, Commented Jan 6, 2013 at 21:42
just to explain why attempt#2 doesn't work(although it should): jQuery internally calls event.preventDefault() for the click-event. The default-action for a click on a checkbox is toggling the checked-property. Because of that you shouldn't use toggle() on elements where you want to proceed with the default click-action(e.g. links, submit-buttons etc. ) — Dr.Molle
– Dr.Molle, Commented Jan 6, 2013 at 22:57

Ram · Accepted Answer · 2013-01-06 21:41:27Z

4

Listen to the change event.

$("#box").change(function(){  
    console.log(this.checked); 
    // console.log( this.checked ? 'on' : 'off' ); 
});

answered Jan 6, 2013 at 21:41

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

lucassp · Accepted Answer · 2013-01-06 21:42:20Z

2

$("#box").change(function() {
  console.log($(this).prop('checked'));
});

answered Jan 6, 2013 at 21:42

lucassp

4,1663 gold badges29 silver badges37 bronze badges

Comments

djthoms · Accepted Answer · 2013-01-06 21:44:09Z

1

It's pretty easy, you need to use the .val() inside of a click event. Here is the code:

$('input[type="checkbox"]').click(function() {
    if( $(this).is(':checked') ) {
        console.log( $(this).val() );
    } else {
        console.log('no');
    }
});

Here is a working demo. Hope this helps!

answered Jan 6, 2013 at 21:44

djthoms

3,1062 gold badges35 silver badges58 bronze badges

Comments

Siamak Motlagh · Accepted Answer · 2013-01-06 21:43:06Z

0

You can do like this:

$('#box').click(function()
{
    if ($('#box').is(':checked')){ 
        console.log("on"); 
    }else{ 
        console.log("off");
    }
});

answered Jan 6, 2013 at 21:43

Siamak Motlagh

5,1547 gold badges47 silver badges66 bronze badges

Collectives™ on Stack Overflow

Get input checkbox toggle state with Jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related