Jquery checkbox change and click event

Handling checkbox and textbox synchronization

Imagine you want to trigger a confirm dialog box when you uncheck a checkbox to always keep the associated text field in sync. The below code snippet illustrates how to achieve this:

$('#myCheckbox').on('change', function() {
  if (!this.checked) {
    // A wild 'Confirm' dialog box appears! - Gotta catch it!
    if (confirm('Sure to uncheck it?')) {
      // Unchecked confirmed! Fetch textbox, clear value.
      $('#myTextbox').val('');
    } else {
      // User bails out. Better luck next time! Reinstate checkbox as checked.
      $(this).prop('checked', true);
    }
  } else {
    // Checkbox checked. Time to party, set textbox value to a celebration message.
    $('#myTextbox').val('Checked, woohoo!');
  }
});


Here, the methods .prop('checked', true/false) and .val() are used to adjust the checkbox's status and textbox's value based on user interactions.

Tinkering with event timing

Browser action events have a sequence and timing that you must consider in order to avoid inconsistent behavior. The mighty mousedown event comes to our rescue, enabling an immediate interaction before the click event is registered:

$('#myCheckbox').on('mousedown', function(event) {
  if(event.which === 1) { // Jedi checks for left mouse button press. Good Jedi!
    // Login: "Toggle checkbox", Password: "Bypassed click event". Access granted!
    this.checked = !this.checked;
    $(this).trigger('change'); // Manually triggers change event
    event.preventDefault(); // Stops normal click event, avoids double-trouble
  }
});


Making it accessible

The best practice points to enhancing accessibility by associating checkboxes with labels. This allows actions on the label to reflect on the checkbox:

<label for="myCheckbox">Check It Out!</label>
<input type="checkbox" id="myCheckbox" />


And corresponding jQuery handling:

$('label[for="myCheckbox"]').on('click', function() {
  // Checkbox feels the label's click. Relationship goals!
  $('#myCheckbox').trigger('click');
});


Streamlining dynamic checkbox handling

For dynamic checkbox scenarios, apply event delegation to handle events consistently, even on checkboxes that might be added later:

$(document).on('change', '.dynamicCheckbox', function() {
  console.log(this.checked); // Good news travels fast. Checkbox status updated
});


Assigning the .on() function to a stable parent element secures both existing and future .dynamicCheckbox instances against unforeseen changes.

Picking up real-world tricks

In real-world scenarios, it's often necessary to verify a checkbox status during event handling. The jQuery method .is(':checked') is an intuitive way to achieve this:

if ($('#myCheckbox').is(':checked')) {
  // If true, it's party time!
}


This provides a readable way to check the status of a checkbox at any point.

Playing around with code

Always test your solutions! An online editor like JSFiddle is great for this purpose:

• JSFiddle Example

This example demonstrates a working solution that you can test and verify directly.