gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:03:19 27 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - Jquery - 检查页面加载时的所有复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21271698/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com