Jquery - 检查页面加载时的所有复选框

Question

我知道这可能看起来像一个业余问题,但我在使用Jquery选择页面加载时的所有复选框时遇到问题.我用纯JS来解决它.

此外,一旦该问题得到解决,我需要遍历所有复选框,看看它们是否全部被检查.如果是,则提醒用户他们都被选中,如果不是全部被选中,则提醒用户另一条消息.

我已经整理了一个简单的Jsfiddle以帮助您入门.任何帮助,将不胜感激.

的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>

Answer 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

或者如果你想更新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