Check if checkbox is NOT checked on click - jQuery

Jquery

Jquery Problem Overview


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?

Jquery Solutions


Solution 1 - Jquery

Try this:

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

demo

Solution 2 - Jquery

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)

Solution 3 - Jquery

jQuery to check for checked? Really?

if(!this.checked) {

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

Solution 4 - Jquery

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

Solution 5 - Jquery

<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

Solution 6 - Jquery

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

https://stackoverflow.com/questions/11158874/how-to-run-click-function-after-default-behaviour-of-a-element/11159050#11159050

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.

Solution 7 - Jquery

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

Solution 8 - Jquery

Do it like this

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionw00View Question on Stackoverflow
Solution 1 - JqueryantyratView Answer on Stackoverflow
Solution 2 - Jquerychris_codeView Answer on Stackoverflow
Solution 3 - JqueryTheZView Answer on Stackoverflow
Solution 4 - JqueryNanhe KumarView Answer on Stackoverflow
Solution 5 - JqueryChandreshView Answer on Stackoverflow
Solution 6 - JqueryNathan FriendView Answer on Stackoverflow
Solution 7 - JqueryPraveen04View Answer on Stackoverflow
Solution 8 - JqueryUsman YounasView Answer on Stackoverflow