javascript Jquery - 检查页面加载时的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21271698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Check all checkboxes on page load
提问by ryan
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.
我知道这似乎是一个业余问题，但我无法使用 Jquery 选择页面加载时的所有复选框。我用纯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>
回答by MT0
$( 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' );
});
or if you want to update the span:
或者如果你想更新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)' );
}
} );
});
回答by adeneo
回答by user2930100
$(document).ready(function(){
$(':checkbox').attr('checked',true);
});
I just tried it in your JSFiddle link and it works.
我刚刚在您的 JSFiddle 链接中尝试了它，并且它有效。
回答by Jatin
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
希望这可以帮助。谢谢，贾廷
回答by Mina Gabriel
$(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"]
});
checkedArrayarray will have a list of idof the checked checkbox
checkedArray数组将有一个id选中复选框的列表
And you can do checkedArray.lengthto get the array length
你可以做得到checkedArray.length数组长度
