Handling the checked state of checkboxes in jQuery often leads to unexpected behavior when developers rely on the attr() method. The core issue stems from how browsers differentiate between HTML attributes and DOM properties.

When a checkbox is rendered, the checked atttribute in the markup represents its initial state. jQuery's attr() method interacts directly with this static HTML attribute. Consequently, calling attr("checked") will consistently return the value defined at page load, regardless of user interaction. This makes it unsuitable for tracking real-time toggle states.

jQuery 1.6 introduced the prop() method specifically to address this distinction. Unlike attr(), prop() accesses the live DOM property, which accurately reflects the current state of the element as modified by user actions or scripts. For boolean attributes like checked, selected, or disabled, prop() is the standard approach.

Consider a scenario requiring a master checkbox to control a group of subordinate checkboxes. An implementation using attr() will fail to synchronize states after the first interaction. Switching to prop() resolves the synchronization issue entirely:

<input type="checkbox" id="master-toggle" /> Select All
<input type="checkbox" class="target-item" /> Backend
<input type="checkbox" class="target-item" /> Frontend
<input type="checkbox" class="target-item" /> Database
<input type="checkbox" class="target-item" /> DevOps

<script>
$(function() {
    $('#master-toggle').on('change', function() {
        const currentState = $(this).prop('checked');
        $('.target-item').prop('checked', currentState);
    });

    // Optional: Update master checkbox if individual items are toggled manually
    $('.target-item').on('change', function() {
        const totalItems = $('.target-item').length;
        const checkedItems = $('.target-item:checked').length;
        $('#master-toggle').prop('checked', totalItems === checkedItems);
    });
});
</script>

The logic above binds a change event to the controller checkbox. When triggered, it captures the live boolean state via prop('checked') and applies that exact value to all target checkboxes. This eliminates conditional branching and ensures the DOM properties stay synchronized.

For scenarios where only the current statee needs evaluation without moddifying other elements, is(':checked') remains a valid alternative. However, when reading or writing the actual state of form controls, prop() provides consistent, cross-browser reliability. Direct property assignment through prop() also avoids the string-parsing overhead associated with attr(), resulting in cleaner and more performant event handlers.