javascript - Jquery - Check all checkboxes on page load - Stack Overflow

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>

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>

• javascript
• jquery
• html
• checkbox

Share Follow asked Jan 22, 2014 at 0:09 ryanryan 1,02522 gold badges1414 silver badges2525 bronze badges 2

• 1 Uh, can't you just add a checked attribute to the input elements themselves? You don't need JS for that part and it's the correct way. – rvighne Commented Jan 22, 2014 at 0:18
• If you select all of them on page load, then why do you need to check if they're selected? I see no need for any JS at all. – rvighne Commented Jan 22, 2014 at 0:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

$( 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

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

$(document).ready(function(){
   $(':checkbox').attr('checked',true);
});

I just tried it in your JSFiddle link and it works.

Please go through the link below that shows various ways to achieve the same:

Check all checkboxes on page load with jQuery

Hope this helps. Thanks, Jatin

$(function(){
$('[type=checkbox]').attr({'checked':'checked'});

var checkedArray = [] ; 
$.each($('[type= checkbox]'),function(index,value){
    if($(this).attr('checked') == 'checked')
    checkedArray.push($(this).attr('id'));
});
    console.log(checkedArray.length);
    //["mon", "tue", "wed", "thur", "fri", "sat", "sun"] 
});

DEMO

checkedArray array will have a list of id of the checked checkbox

And you can do checkedArray.length to get the array length