[英]JQuery: How to check if all checkboxes of a certain class are checked within a form
HTML:
<form class="thirdlevel" id="monkeybox">
<input type="checkbox" name="monkey" value="monkey" class="correct"> Monkey <br>
<input type="checkbox" name="monkey" value="yellow" class="incorrect"> Yellow <br>
<input type="checkbox" name="monkey" value="brown" class="correct"> Brown <br>
<input type="checkbox" name="monkey" value="human" class="incorrect"> Human <br>
<input type="checkbox" name="monkey" value="mouse" class="incorrect"> Mouse<br>
<input type="checkbox" name="monkey" value="horse" class="incorrect"> Horse <br>
<input type="checkbox" name="monkey" value="hairy" class="correct"> Hairy <br>
<input type="checkbox" name="monkey" value="land" class="correct"> Land creature<br>
</form>
JS:
$monkeybox.on("change", function() {
$(":checkbox").on("change", function() {
if (all checkboxes with class "correct" are checked && all checkboxes with class "incorrect" aren't checked) {
//do something
}
});
});
這是我到目前為止。 我不確定如何檢查是否選中了所有類“正確”的復選框,以及是否未選中所有類“不正確”的復選框。 我完全不知道如何做到這一點。
你可以這樣做:
$(".correct, .incorrect").change(function(){ if ($('.correct:checked').length == $('.correct').length) { if ($('.incorrect:checked').length == 0) // Check if all checkboxes with class "correct" are checked, and all checkboxes that have class "incorrect" aren't checked. alert("all correct is checked, and all incorrect is unchecked"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="thirdlevel" id="monkeybox"> <input type="checkbox" name="monkey" value="monkey" class="correct"> Monkey <br> <input type="checkbox" name="monkey" value="yellow" class="incorrect"> Yellow <br> <input type="checkbox" name="monkey" value="brown" class="correct"> Brown <br> <input type="checkbox" name="monkey" value="human" class="incorrect"> Human <br> <input type="checkbox" name="monkey" value="mouse" class="incorrect"> Mouse<br> <input type="checkbox" name="monkey" value="horse" class="incorrect"> Horse <br> <input type="checkbox" name="monkey" value="hairy" class="correct"> Hairy <br> <input type="checkbox" name="monkey" value="land" class="correct"> Land creature<br> </form>
$( "input[type=checkbox].correct:checked" ).length ==$('input[type=checkbox].correct').length && $( "input[type=checkbox].incorrect:checked" ).length==0
如果所有復選框都匹配它們的類,您可以創建一個返回布爾值的函數:
function checkIfBoxesCorrect() {
$("#monkeybox input").each(function(){
// For each checkbox,
// check if the class matches the isChecked value
if( $(this).attr("checked") ) {
if( $(this).hasClass("incorrect") ){
return false;
}
} else {
if( $(this).hasClass("correct") ){
return false;
}
}
});
return true;
}
這是一個簡單的例子:
var isAllChecked = function( className ){
'use strict';
var elems = $( className );
var isAllchecked = false;
var numChecked = 0;
$.each( elems, function(idx, item){
if( item.checked )
numChecked += 1;
});
if( numChecked === elems.length )
isAllchecked = true;
return isAllchecked;
}
然后你可以做這樣的事情:
...
if ( isAllChecked( '.correct' ) && isAllChecked('.incorrect') ){
// do something
}
...
這只是獲取元素已檢查狀態的一種方法。 這本質上是 jQuery 中 .prop() 方法的簡寫,例如elem.prop('checked') // true or false
或者,您可以使用更簡單的:checked
選擇器(適用於選擇的復選框、單選和選項:
$('.correct:checked').length
然后將上述函數簡化為:
var isAllChecked2 = function( className ){
return $(className + ':checked').length == $(className).length
}
有關更多信息,請參閱相關的 jQuery 文檔:
$monkeybox.on("change", function() {
$(":checkbox").on("change", function() {
if (
$(this).hasClass("correct").not(":checked").length == 0 &&
$(this).hasClass("incorrect").is(":checked").length == 0
) {
//do something
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.