Function not called for first click on checkbox

Question

When checking the checkbox, I need to call the function. The first time I check the box, the function is not called, and if I check it again, the function will be called successfully. Please help me solve this problem. Here I showed part of my HTML and function.

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

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

Answer 1

If you want to use the built-in event handler,

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

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

DEMO

OR

If you want to use the jQuery event handler,

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

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

DEMO

Answer 2

You just bind the event changeon first click.

onchange, dom.

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

onchange LoadContactDetails().

HTML:

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

JS:

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

                                      **Or**

.

onchange, dom.

Html:

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

.js

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

, .

Answer 5

change LoadContactDetails(). ( )

.

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

Answer 6

. , . , :

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 on callback functions.

Answer 7

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

Answer 8

I tried all the solutions given here, but for me it did not work. Finally, I found an easy way to solve this problem. Hope this helps you too.

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()"/>

Run codeHide result