Check if checkbox is NOT checked on click - jQuery

Question

I want to check if a checkbox just got unchecked, when a user clicks on it. The reason for this is because i want to do a validation when a user unchecks a checkbox. Because atleast one checkbox needs to be checked. So if he unchecks the last one, then it automatically checks itself again.

With jQuery i can easily find out wether it's checked or not:

$('#check1').click(function() {
    if($(this).is(':checked'))
        alert('checked');
    else
        alert('unchecked');
});

But i actually only want to have an if statement that checks if a checkbox just got unchecked.

So i thought i could do that with the following code:

$('#check2').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

But this will always show the 'unchecked' message. Not really what i was expecting...

demo: http://jsfiddle.net/tVM5H/

So eventually i need something like:

$('#check2').click(function() {
    if($(this).not(':checked')) {
        // Got unchecked, so something!!!
    }
});

But obviously this doesn't work. I rather don't want to use the first example, because then i'd have an unnecessary 'else' statement when i only need one 'if' statement.

So first thing, is this a jQuery bug? Cause to me it's unexpected behaviour. And second, anyone any ides for a good alternative?

antyrat · Accepted Answer · 2012-06-22 15:24:03Z

198

Try this:

if(!$(this).is(':checked'))

demo

answered Jun 22, 2012 at 15:24

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

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

Comments

chris_code · Accepted Answer · 2012-06-22 15:27:25Z

72

The answer already posted will work. If you want to use the jQuery :not you can do this:

if ($(this).is(':not(:checked)'))

or

if ($(this).attr('checked') == false)

answered Jun 22, 2012 at 15:27

chris_code

1,2249 silver badges10 bronze badges

1 Comment

Toby 1 Kenobi Over a year ago

The first example in this answer seems the easiest to read out of all the options, so I vote for that.

TheZ · Accepted Answer · 2012-06-22 15:26:05Z

9

jQuery to check for checked? Really?

if(!this.checked) {

Don't use a bazooka to do a razor's job.

answered Jun 22, 2012 at 15:26

TheZ

3,73221 silver badges34 bronze badges

4 Comments

Chris Over a year ago

If using jQuery to find the element, it should read $(this)[0].checked

TheZ Over a year ago

@HoldOffHunger It's part of the native input element: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… If you are using jQuery then Chris has the correct syntax in the comment above yours.

HoldOffHunger Over a year ago

@TheZ : Nice! Yes, you are right, answer by Chris is good. Suggestion: Add it to answer with credit? Both OP and top answers lean towards $(selector).is('...'), which is a pure jQuery solution. Only using .checked where they have .is('checked') will not work by itself.

paxton Over a year ago

If using native Javascript this will only display the initial value of the checkbox when the page is loaded. It will not reflect any state changes. Read the documentation here, developer.mozilla.org/en-US/docs/Web/HTML/Element/input/….

Nanhe Kumar · Accepted Answer · 2013-10-06 02:47:56Z

6

$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });

answered Oct 6, 2013 at 2:47

Nanhe Kumar

16.4k5 gold badges84 silver badges72 bronze badges

Comments

Chandresh · Accepted Answer · 2016-03-10 06:29:13Z

4

<script type="text/javascript">

 if(jQuery('input[id=input_id]').is(':checked')){
  // Your Statment
 }else{
  // Your Statment
 }

 OR

 if(jQuery('input[name=input_name]').is(':checked')){
  // Your Statment
 }else{
  // Your Statment
 }

</script>

Code taken from here : http://chandreshrana.blogspot.in/2015/10/how-to-check-if-checkbox-is-checked-or.html

answered Mar 10, 2016 at 6:29

Chandresh

3712 silver badges7 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:59Z

2

Check out some of the answers to this question - I think it might apply to yours:

how to run click function after default behaviour of a element

I think you're running into an inconsistency in the browser implementation of the onclick function. Some choose to toggle the checkbox before the event is fired and some after.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jun 22, 2012 at 15:27

Nathan Friend

12.9k12 gold badges80 silver badges131 bronze badges

2 Comments

TheZ Over a year ago

This is actually really important too.

JoeBrockhaus Over a year ago

And that's why jQuery to check for checked. Really. ;)

Praveen04 · Accepted Answer · 2013-09-23 13:01:21Z

1

The Answer already posted .But We can use the jquery in this way also

demo

$(function(){
    $('#check1').click(function() {
        if($('#check1').attr('checked'))
            alert('checked');
        else
            alert('unchecked');
    });

    $('#check2').click(function() {
        if(!$('#check2').attr('checked'))
            alert('unchecked');
        else
            alert('checked');
    });
});

edited Sep 23, 2013 at 13:01

answered Sep 23, 2013 at 12:53

Praveen04

99310 silver badges12 bronze badges

Comments

w00 · Accepted Answer · 2013-06-21 13:15:39Z

0

Do it like this

if (typeof $(this).attr("checked") == "undefined" )

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")

edited Jun 21, 2013 at 13:15

w00

26.9k35 gold badges106 silver badges147 bronze badges

answered Jun 21, 2013 at 10:19

Usman Younas

1,37915 silver badges21 bronze badges

1 Comment

alex Over a year ago

This could just be this.checked. The first line doesn't need typeof there (it will never raise a ReferencError). You should also be using prop() instead of attr(), which will return a boolean, making your second one also redundant.

Sathish · Accepted Answer · 2023-02-16 06:39:02Z

0

Below code also will work

<input type="checkbox" id="check1" /> Check1

$('#check1').change(function() {
    if ($(this).is(":checked") == false)
    {
    alert("Unchecked");
    }
    else
    {
    alert("Checked");
    }    
});

or

$('#check1').change(function() {
   if ($(this).is(":not(:checked)"))
   {
   alert("Unchecked");
   }    
});

answered Feb 16, 2023 at 6:39

Sathish

893 bronze badges

Collectives™ on Stack Overflow

Check if checkbox is NOT checked on click - jQuery

9 Answers 9

Comments

1 Comment

4 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

4 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related