Do different actions based on checkbox state

Question

What I'm trying is quite simple, but for some reason I can't get it working:

I need a way to do different actions based on checkbox state. If it's checked, do something. If not, do something else. For some reason I can only have "checked" state:

$('#checkbox1').on('change', function() {
    if ($('#checkbox1:checked')) {
        console.log('do something')
    } else {
        console.log('do something else')
    }
});

Codepen: http://codepen.io/anon/pen/EZROGa?editors=1010

what am I missing?

Possible duplicate of [Check if checkbox is checked with jQuery](http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery) — Keatinge, Feb 06 '17 at 04:38

score 2 · Accepted Answer · answered Feb 06 '17 at 04:37

2

Try this:

$('#checkbox1').on('change', function() {
  if($(this).is(':checked'))  // here $(this) refers to $('#checkbox1') 
  {
     // do some thing
  }
  else
  {
     // do some thing
  }
});

answered Feb 06 '17 at 04:37

Mayank Pandeyz

25,704
4
40
59

score 1 · Answer 2 · answered Feb 06 '17 at 04:37

$('#checkbox1').on('change', function() {
  if ($('#checkbox1').is(":checked")) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" />

Use like this

score 1 · Answer 3 · answered Feb 06 '17 at 04:38

1

$('#checkbox1').on('change', function() {
  if ($(this).is(":checked")) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})

answered Feb 06 '17 at 04:38

Akshay

815
7
16

score 1 · Answer 4 · answered Feb 06 '17 at 04:41

1

Correct syntax is :

`$('#checkbox1').on('change', function() {
  if ($('#checkbox1').prop('checked')) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})`

answered Feb 06 '17 at 04:41

harshit.jyoti

11
2

score 1 · Answer 5 · answered Feb 06 '17 at 04:41

1

You can use the .prop() jquery function.

$('#checkbox1').on('change', function() {
  if ($('#checkbox1').prop( "checked" )) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})

http://api.jquery.com/prop/

answered Feb 06 '17 at 04:41

Web Dev Guy

1,693
3
18
42

score 1 · Answer 6 · answered Feb 06 '17 at 04:59

$('#checkbox1').on('change', function() {
  if ($(this).is(":checked")) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkbox1" name="checkbox1" type="checkbox"><label for="checkbox1">some checkbox</label>

Try above one. 'this' keyword points to the current html element.

score 0 · Answer 7 · answered Feb 06 '17 at 04:38

0

Here you go:

$('#checkbox1').on('change', function() {
  if ($('#checkbox1:checked').length) {
    console.log('do something')
  } else {
    console.log('do something else')
  }
})

answered Feb 06 '17 at 04:38

kawadhiya21

2,458
21
34

score 0 · Answer 8 · answered Feb 06 '17 at 04:42

0

I like taking this clean approach

var check = $("#checkbox1:checked").length;

if(check) //Do Something.

answered Feb 06 '17 at 04:42

Darkrum

1,325
1
10
27

score 0 · Answer 9 · answered Feb 06 '17 at 06:09

0

try this :

$('#checkbox1').on('click', function() {
 if ($(this).prop("checked") == true) {
  console.log('do something')
 } else {
  console.log('do something else')
 }
})

answered Feb 06 '17 at 06:09

aks7

431
3
12

Do different actions based on checkbox state

9 Answers9