Function not called for first click on checkbox

Question

On checking a checkbox, I need to call a function. The first time I check the checkbox the function is not called whereas if I check it again, the function is successfully called. Please help me solve this issue. Here I have showed the part of my HTML and the function.

<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">

function LoadContactDetails() {
    $("#checkThen").change(function () {
        if ($(this).is(":checked")) {
            // ..........
         }
        else {
            // ..........
        }
    });
}

Answer 1

If you want to attach inline event handler use ,

<input type="checkbox" id="checkThen" onchange="LoadContactDetails(this)" />

function LoadContactDetails(element) {
    alert(element.checked);
}

DEMO

OR

If you want to use jQuery event handler use,

<input type="checkbox" id="checkThen" />

$(function() {
    $("#checkThen").change(function () {
        if (this.checked) {
            // checked
         }
        else {
            // unchecked
        }
    });
});

DEMO

Answer 2

You just bind the change event first time you clicked.

Remove the onchange attribute, then just bind the change event at the dom ready callback.

html:

<input type="checkbox" id="checkThen">

js:

$(function() {
    $("#checkThen").change(function () {
        if ($(this).is(":checked")) {
            ..........
         }
        else {
            ..........
        }
    });
});

Answer 3

 $(document).ready(function(){
        $("#checkThen").change(function () {
            if ($(this).is(":checked")) {
                ..........
             }
            else {
                ..........
            }
        });
    });

Answer 4

Remove the onchange attribute in function LoadContactDetails().

html:

<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">

js:

function LoadContactDetails() {    
    if ($('#checkThen').is(":checked")) {
        alert('checked');
     }
    else {
         alert('Not-checked');
    }
}

Demo

                                      **Or**

You just bind the change event first time you clicked.

Remove the onchange attribute, then just bind the change event at the dom ready callback.

Html:

<input type="checkbox" id="checkThen">

.js:

$(function() {
  $("#checkThen").change(function () {
    if ($(this).is(":checked")) {
        alert('checked');
     }
    else {
        alert('Not checked');
    }
  });
});

Demo

Hope it should helpful for you.

Answer 5

In the first click you are binding an event to the checkbox. And from 2nd click onwards the callback function gets fired, and a new event binding will also happen. You can make it work by simply changing the code as follows,

HTML

<input type="checkbox" id="checkThen" >

Javascript

$(document).ready(function(){
    $("#checkThen").change(function () {
        if (this.checked) {
            // checked
         }
        else {
            // unchecked
        }
    });
});

Please follow this article on getting an idea about callback functions

Answer 6

Try using "Click" instead of "change. It might work.

Answer 7

Here you bind change event every time when function LoadContactDetails() call. (It's not correct way)

You can just call your code directly inside your function.

function LoadContactDetails() {
    if ($('#checkThen').is(":checked")) {
       alert('checked');
    } else {
       alert('Not-checked');
   }
}

Working Fiddle

Answer 8

i tried all the solutions given here but it did not work for me Finally, I found an easy way to solve this problem.I hope this will helpful for you also.

function LoadContactDetails() {
    $("#checkThen").change(function () {
        if ($(this).is(":checked")) {
          alert('hello')
         }
        else {
            alert('something wronge')
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkThen" onMouseDown="LoadContactDetails()"/>