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');

    };

});

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');

    };

});

• javascript
• jquery

• possible duplicate of How do I check if a checkbox is checked with JQuery? and Triggering a jquery action when the users mark a Checkbox – Felix Kling Commented Feb 17, 2012 at 13:37

7 Answers 7

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

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./change/

have a nice day!

   <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>

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.

$(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)

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

    };
}

You have to call the above function in the onchange of your checkbox

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