JQuery:如何检查某个类的所有复选框是否都在表单中选中
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"的所有框是否都没有被选中。我完全不知道该怎么做。
你可以这样做:
$(".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中.prp()方法的简写,例如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
}
});
});
相关文章:
- JQuery:如何检查某个类的所有复选框是否都在表单中选中
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- j查询检查复选框是否被选中,然后向输入字段添加值
- 检查网格视图中的复选框是否被选中
- JQuery:如何检查复选框是否被选中并向字段添加属性
- 选中复选框是否使用jquery选中
- 如何检查复选框是否在特定表单中被选中
- 如何在HTML和JavaScript中检查复选框是否为真
- 如何确定复选框是否已选中
- JavaScript 检查复选框是否被输入值禁用
- 如何使用 *jquery mmenu 插件*检查复选框是否处于选中状态
- 如何选中复选框是否使用javascript
- 如何选中复选框是否选中,而价格滑块事件发生
- 检查所有选中的复选框是否具有值=正确,以及所有未选中的复选框的值=错误
- 动态 javascript,用于检测复选框是否被选中并禁用相应的输入字段
- 选中复选框是否选中,则添加值,如果未选中则删除值
- 检测复选框是否在 Angular.js ng-change 事件中处于选中状态
- 检查复选框是否被选中(js/jquery)
- 如何在单击复选框之前检查复选框是否已选中
- javascript 是否可以确定复选框是否已选中或未选中