javascript - Function not called for first click on checkbox - Stack Overflow

admin管理员组

文章数量:1302360

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 {
            // ..........
        }
    });
}

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 {
            // ..........
        }
    });
}

• javascript
• jquery
• checkbox
• onchange

Share Improve this question Follow edited Feb 28, 2014 at 4:33 rvighne 21.9k1111 gold badges5353 silver badges7575 bronze badges asked Feb 28, 2014 at 4:26 user3363329user3363329 7911 gold badge22 silver badges88 bronze badges 1

• Why r u using both javascript & jquery in it – Jain Commented Feb 28, 2014 at 4:29

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 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

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 {
            ..........
        }
    });
});

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

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.

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

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

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

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkThen" onMouseDown="LoadContactDetails()"/>

本文标签： javascriptFunction not called for first click on checkboxStack Overflow