JQuery Check if a checkbox is checked checking only working onload

Question

I am trying to check if a checkbox is checked or not at all times but I'm only getting alerted when the page loads and not at any time when the status has changed.

Here is the code:

<script type="text/javascript">
    $(function(){

        if ($('#myCheckBox').is(':checked')) {
          alert('Yes my checkbox is checked');
    } else {
          alert('No my checkbox is not checked');

    };

});

Answer 1

You have to bind the "change" event of the checkbox:

$('#myCheckBox').change(function() {

    if (this.checked) { //if ($(this).is(':checked')) {
          alert('Yes my checkbox is checked');
    } else {
          alert('No my checkbox is not checked');
    };
})

When the checkbox will be clicked, the handler will be executed.

Further rading:

• .change()

Answer 2

try:

$('#myCheckBox').change(function(){

        if ($('#myCheckBox').is(':checked')) {
          alert('Yes my checkbox is checked');
    } else {
          alert('No my checkbox is not checked');

    };

});

this will call you function every time it's state changes. http://api.jquery.com/change/

have a nice day!

Answer 3

You also need to subscribe to the change-event:

<script type="text/javascript">
    $(function(){
      var changeHandler = function () {
          if ($(this).is(':checked')) {
            alert('Yes my checkbox is checked');
          } else {
            alert('No my checkbox is not checked');
          }   
        };

      $('#myCheckbox').change(changeHandler)
                      .trigger('change');
    });
</script>

What it does:

1. Use the onload-event to create a function to be used as an event handler for the change-event
2. Register the changeHandler to the changeEvent of the checkbox
3. Trigger the change-event on page load so it is also run when the page is first loaded (synthetic event)

Now, what's interesting about this approach is that it allows the changeHandler to be utilized in a more generic manner. Since you use $(this) instead of $(selector) inside the handler, you can use this function for event delegation, like so:

$('body').on('change', 'input[type=checkbox]', changeHandler);

This would register the changeHandler to listen to all change-events to checkboxes on the entire page.

Answer 4

   <script type="text/javascript">

    $('#myCheckBox').change(function() {
         if ($(this).is(':checked')) {
              alert('Yes my checkbox is checked');
        } else {
              alert('No my checkbox is not checked');

        };
    });
    <script>

Answer 5

$(someFunction) is jQuery short-hand for "Run this function when the DOM is ready".

If you want it to run when the checkbox is interacted with, you'll need to bind an event handler (such as click )

Answer 6

$('#myCheckBox').click(function() {
    if ($('#myCheckBox').is(':checked')) {
          alert('Yes my checkbox is checked');
    } else {
          alert('No my checkbox is not checked');

    };
}

Answer 7

您必须在复选框的onchange中调用上述函数

<input type="checkbox" name="myCheckBox" onchange="callCheckBoxChangeFunction()" value="Bike" /> I have a bike<br />