CODEWITHSUNDEEP
javascriptjquery
Rico Letterman
Rico Letterman

Reputation: 651

Do different actions based on checkbox state

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?

Upvotes: 0

Views: 88

Answers (9)

aks7
aks7

Reputation: 441

try this :

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

Upvotes: 0

Abi
Abi

Reputation: 734

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

Upvotes: 1

Darkrum
Darkrum

Reputation: 1373

I like taking this clean approach 

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

if(check) //Do Something.

Upvotes: 0

Web Dev Guy
Web Dev Guy

Reputation: 1789

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/

Upvotes: 1

harshit.jyoti
harshit.jyoti

Reputation: 11

Correct syntax is :

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

Upvotes: 1

Akshay
Akshay

Reputation: 805

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

Upvotes: 1

kawadhiya21
kawadhiya21

Reputation: 2528

Here you go:

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

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

Upvotes: 2

guradio
guradio

Reputation: 15555

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

Upvotes: 1

Related Questions