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

【问题标题】：Jquery - Check all checkboxes on page loadJquery - 检查页面加载的所有复选框
【发布时间】：2014-01-22 00:09:47
【问题描述】：

我知道这可能看起来像是一个业余问题，但我在使用 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>

【问题讨论】：

呃，你不能只给输入元素本身添加一个checked 属性吗？那部分你不需要JS，这是正确的方法。
如果您在页面加载时选择了所有这些，那么您为什么需要检查它们是否被选中？我认为根本不需要任何 JS。

标签： javascript jquery html checkbox

【解决方案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

【讨论】：

MTO，非常感谢！这完美地工作。我喜欢你如何创建一个数组并回调检查的日期。非常聪明！你回答了我的问题及其他问题。给你的道具！

【解决方案2】：

全部检查

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

查看它们是否都被选中（似乎您必须为自定义样式设置属性）

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

FIDDLE

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

Check all checkboxes on page load with jQuery

希望这会有所帮助。谢谢，贾廷

【讨论】：

【解决方案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 获取数组长度

【讨论】：