Question

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

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

我已经组建了一个简单的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

Answer 2

全部检查

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

查看是否全部选中（似乎您必须设置自定义样式的属性）

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

FIDDLE

Answer 3

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

我刚刚在你的JSFiddle链接中尝试过它，它可以工作。

Answer 4

请浏览下面的链接，其中显示了实现相同目标的各种方法：

Check all checkboxes on page load with jQuery

希望这会有所帮助。谢谢， Jatin

Answer 5

$(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数组将包含已选中复选框id的列表

你可以checkedArray.length来获得数组长度

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

5 个答案: