Jquery Checkbox Change and Click Event

jQuery checkbox change and click event

Tested in JSFiddle and does what you're asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

Updated Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Original Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

jQuery change event is not working with checkbox

Need to call below jQuery methods to working code

$(document).ready(function(){ // jQuery methods go here... });

OR

$(function(){ // jQuery methods go here... });

<tr>
  <td class="large-width">
    <p>
      <label>
        <input type="checkbox" id="checkbox" ${todo.isCompleted ? 'checked="checked"' : ''} />
        <span class="text">${todo.item}</span>
      </label>
    </p>
  </td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){
   $('#checkbox').change(function(){
     console.log('something');
   }); });
</script>

jQuery checkbox checked state changed event

Bind to the change event instead of click. However, you will probably still need to check whether or not the checkbox is checked:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state. If you only want to capture events that cause the checkbox to change state, you want the aptly-named change event. Redacted in comments

Also note that I've used this.checked instead of wrapping the element in a jQuery object and using jQuery methods, simply because it's shorter and faster to access the property of the DOM element directly.

Edit (see comments)

To get all checkboxes you have a couple of options. You can use the :checkbox pseudo-selector:

$(":checkbox")

Or you could use an attribute equals selector:

$("input[type='checkbox']")

jQuery difference between change and click event of checkbox

According to the W3C, the onclick event is triggered by the keyboard for accessibility purposes:

SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

In order to provide a better user experience for those without the use of a mouse, browsers have been developed to fire the onclick event even if the click occurs with a keyboard.

For this reason, jQuery's click event will fire even if the checkbox is clicked by using the keyboard's spacebar. change, obviously, will fire every time the checkbox's state changes.

The checkbox just happens to be the special case where change and click are interchangable, because you can't fire the change event without also triggering click.

Of course, the exception to this rule is if you were to use javascript to manually alter the checkbox, such as:

/* this would check the checkbox without firing either 'change' or 'click' */
$('#someCheckbox').prop('checked',true);

/* this would fire 'change', but not 'click'. Note, however, that this
   does not change the checkbox, as 'change()' is only the function that
   is fired when the checkbox changes, it is not the function that
   does the changing  */
$('#someCheckbox').trigger('change');

/* this would fire 'click', which by default change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

Here's a demonstration of these different actions: http://jsfiddle.net/jackwanders/MPTxk/1/

Hope this helps.

checkbox click event fired twice for class name vs once for id (jquery)

Issue:- Since div and checkbox both share same class, that's why event trigger two times (clicking on checkbox trigger event on checkbox as well as on div both due to the same class)

So change the classes and you will good to go

Working snippet:-

jQuery( document ).ready(function(event) {
  jQuery(".checkbox").click(function() {
    if(jQuery(this).is(":checked"))      alert('checked');
    else      alert('unchecked ');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <h2><label><input type="checkbox" class="checkbox" value="">Ignore  Registration</label></h2></div>

jquery select all checkbox doesn't trigger change event on individual checkbox

The change event is only triggered automatically when the user changes the element, not when it's changed from code. You need to trigger the event explicitly.

$("#selectAll").on( "click", function(e) {
    $(':checkbox.all_serp_results_selector').prop('checked', this.checked).change();
});

jQuery Click Event CheckBox Changed Ajax Call

Your click handler isn't right. You need to pass in the id of the button and use jQuery click handler. You also need not to nest the handlers:

$(document).ready(function() {
  $("#UpdateButton").click(update);
  $('#NatAm').change(update);
});

function update() {
  $.ajax({
    url: '/Transactions/NativeUpdate',
    type: 'POST',
    dataType: 'json'
  });
}

JSFiddle Demo: https://jsfiddle.net/vLzwuwdo/

How to handle change of checkbox using jQuery?

Use :checkbox selector:

$(':checkbox').change(function() {

        // do stuff here. It will fire on any checkbox change

}); 

Code: http://jsfiddle.net/s6fe9/

jQuery checkbox event handling

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

---

Related Topics