Jquery - Check all checkboxes on page load

Question

I know this may seem like an amateur problem but I am having trouble selecting all the checkboxes on page load using Jquery. I figured it out with pure JS.

Also, once that problem is solved I need to iterate through all checkboxes and see if they are all checked. If they are, alert the user they are all selected, if not all of them are selected then alert the user another message.

I have put together a simple Jsfiddle to help get started. Any help would be appreciated.

JSFIDDLE

<table>
<tr>
    <th>Days of Week</th>
        <td>
        <div class="checkbox-group" id="checkboxes">
             <ul>
             <li>
                <input type="checkbox" id="mon"/>
                <label for="mon">MON</label>
             </li>
             <li>
                <input type="checkbox" id="tue"/>
                <label for="tue">TUE</label>
             </li>
             <li>
                <input type="checkbox" id="wed"/>
                <label for="wed">WED</label>
             </li>
             <li>
                <input type="checkbox" id="thur"/>
                <label for="thur">THUR</label>
             </li>
             <li>
                <input type="checkbox" id="fri"/>
                <label for="fri">FRI</label>
             </li>
             <li>
                <input type="checkbox" id="sat"/>
                <label for="sat">SAT</label>
             </li>
             <li>
                <input type="checkbox" id="sun"/>
                <label for="sun">SUN</label>
             </li>
             </ul>              
            </div>
 <span id="allChecked" style="display:block; width:425px; text-align:center; color:#999999;">
                (all days selected)
            </span>
        </td>
    </tr>

Solution 1

$( document ).ready( function(){
    var checkboxes = $( ':checkbox' );

    // Check all checkboxes
    checkboxes.prop( 'checked', true );

    // Check if they are all checked and alert a message
    // or, if not, alert something else.
    if ( checkboxes.filter( ':checked' ).length == checkboxes.length )
        alert( 'All Checked' );
    else
        alert( 'Not All Checked' );
});

JSFIDDLE

or if you want to update the span:

$( document ).ready( function(){
    var checkboxes = $( ':checkbox' ),
        span       = $( '#allChecked' );

    checkboxes.prop( 'checked', true );

    checkboxes.on( 'change', function(){
        var checked = checkboxes.filter( ':checked' );
        if ( checked.length == checkboxes.length )
            span.text( '(All Days Selected)' );
        else
        {
            var days = jQuery.map( checked, function(n){return n.id;} );
            span.text( '(' + days.join(', ') + ' Selected)' );
        }
    } );
});

JSFIDDLE

Solution 2

To check them all

$('[type="checkbox"]').attr('checked', true);

to see if they are all checked (seems you have to set the attribute for the custom styling)

$('[type="checkbox"]').length === $('[type="checkbox"]:checked').length

FIDDLE

Comments

[ryan]

MTO, Thank you so much! This works perfectly. I like how you created an array and called back the days that were checked. Very clever! You answered my question and beyond. Props to you!