Question

选中复选框后，我需要调用一个函数。我第一次检查复选框时没有调用该函数，而如果我再次检查它，则成功调用该函数。请帮我解决这个问题。在这里，我展示了我的HTML部分和功能。

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

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

Answer 1

您只需在首次点击时绑定change事件。

删除onchange属性，然后在dom ready回调中绑定更改事件。

HTML：

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

JS：

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

Answer 2

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

Answer 3

如果要附加内联事件处理程序，请使用

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

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

`DEMO`

或者

如果要使用jQuery事件处理程序，

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

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

`DEMO`

Answer 4

删除函数LoadContactDetails（）中的onchange属性。

<强> HTML：

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

<强> JS：

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

Demo

                                      **Or**

您只需在首次点击时绑定更改事件。

删除onchange属性，然后在dom ready回调中绑定change事件。

<强> HTML

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

<强>的.js：

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

Demo

希望它对你有所帮助。

Answer 5

每次调用函数change时绑定LoadContactDetails()事件。（这不是正确的方式）

您可以直接在函数内调用代码。

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

Working Fiddle

Answer 6

在第一次单击时，您将事件绑定到复选框。从第二次点击开始，回调函数被触发，并且还会发生新的事件绑定。您可以通过简单地更改代码来使其工作，

<强> HTML

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

<强>的Javascript

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

请按照此article了解回调函数

Answer 7

尝试使用“点击”代替“更改。它可能有用。

Answer 8

我尝试了这里给出的所有解决方案，但它对我不起作用最后，我找到了解决这个问题的简单方法。我希望这对你也有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

首先没有要求函数复选框

8 个答案:

`DEMO`

或者

`DEMO`