jquery chekbox selected

Question

Hi I'm having some problems with jquery checkbox selected. I want to do a task when the checkbox is selected. my code for this is

$(document).ready(function() {
        if ($('#chxGetText').is(':checked')) {
            alert("OK");
        }
    });

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

But nothing happen when I check the checkbox. Any ideas?

Answer 1

You need to bind an event listener to the change event of the checkbox. Right now, you’re only checking if the checkbox is checked when the page loads, i.e. once.

$(function() {
 $('#chxGetText').change(function() {
  if ($(this).is(':checked')) {
   alert('OK');
  } else {
   alert('Not OK');
  };
 }).trigger('change'); // trigger it on page load as well
});

Note that you should probably trigger the event on page load as well, in case the user refreshes the page after checking the checkbox (hence the .trigger('change') in my code).

Answer 2

You were not assigning an event to the element, try this:

$(document).ready(function() {
  $('#chxGetText').click(function(){
    if ($(this).is(':checked')) {
     alert("OK");
    }
  });
});

Answer 3

:checked is just a selector, it doesn't bind any event listeners. Do something like this:

$(document).ready(function() {
    $('#chxGetText').change( function (e) {
       if($(this).is(':checked')) {
          alert('Checked');
       }
       else {
          alert('Unchecked');
       }
    });
});

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

Answer 4

You need to assign an event handler to the onclick event of the checkbox. Your current code only runs once, when the document is loaded and doesn't react to any state changes after that.

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

function checkState(node) {
    if (node.checked) {
        alert("OK");
    }
}

$(document).ready(function() {
    $('#chxGetText').click(function() {
        // Bind checkState to click event
        checkState(this);
    }).each(function() {
        // Initial check on load
        checkState(this);
    });
});

Answer 5

Try this:

    $('#chxGetText:checked').alert('OK');

Answer 6

You can use code like

jQuery("#chxGetText").click(function() {
    if ($(this).is(':checked')) {
        alert("#chxGetText is checked");
    }
    else {
        alert("#chxGetText is unchecked");
    }
});