JQuery: 测试是否未选中复选框

我有两个复选框(将来还会有更多) :

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

基本上，我想编写一个 if 语句，并测试它们中的一个是否被检查，另一个是否未被检查。完成以下任务最简单的方法是什么:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
$("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
// do something
}
632982 次浏览
小开
最佳答案

我使用的一种可靠方法是:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
//do something
}

如果希望对选中的元素进行迭代，请使用父元素

$("#parentId").find("checkbox").each(function(){
if ($(this).prop('checked')==true){
//do something
}
});

更多信息:

这个工作得很好，因为所有复选框都选中了一个存储复选框实际状态的属性。如果你愿意，你可以检查页面，并尝试勾选和取消勾选，你会注意到属性“勾选”(如果存在)将保持不变。此属性仅表示复选框的 初始状态，而不表示 目前状态。当前状态存储在为该复选框选中的 dom 元素的属性中。

参见 HTML 中的属性和属性

小开

如果你用 .attr()来做，看看它是否被检查过，它应该是 .attr("checked", "checked")，如果不是，它应该是 .attr("checked") == undefined

小开 
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
小开

另一种方式:

这里是一个 工作范例和这里的代码，你也应该使用道具。

$('input[type="checkbox"]').mouseenter(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
alert("is checked");
} else {
//$(this).prop('checked',true);
alert("not checked");
}
});​

我注释掉了切换选中属性的方法。

小开 
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
// do something if the checkbox is NOT checked
}
小开

您还可以使用 jQuery 强 > .not()强方法或者 :not() 选择器:

if ($('#checkSurfaceEnvironment').not(':checked').length) {
// do stuff for not selected
}

JSFiddle 示例

附加说明

来自 :not() 选择器的 jQuery API 文档:

。不() 方法最终将为您提供更多的可读性 选择，而不是将复杂的选择器或变量推入 翻译: not () 在大多数情况下，这是一个更好的选择。

小开

我正在寻找一个更直接的实现，就像 Avijendr 建议的那样。

我对他/她的语法有点困难，但我得到了这个工作:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

在我的例子中，我有一个带有类 user-forms的表，我正在检查在其 id中包含字符串 checkPrint的复选框中是否有未选中的复选框。

小开

如果在 div 中选中了所有复选框，则返回 true

function all_checked (id_div){
all_checked = true;


$(id_div+' input[type="checkbox"]').each(function() {
all_checked = all_checked && $('this').prop('checked');
}


return all_checked;
}
小开

这里我有一个关于这个问题的片段。

$(function(){
$("#buttoncheck").click(function(){
if($('[type="checkbox"]').is(":checked")){
$('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
}else{
$('.checkboxStatus').html("Sorry! Checkbox is not checked");
}
return false;
})
    

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
Checkbox</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
Checkbox</label>
<br>
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" id="buttoncheck" value="Check">
</p>
<p class="checkboxStatus"></p>
</form>

小开

试试这个

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
//your code in case of NOT checked
}

在上面的代码中，通过 Id (#checkSurfaceEnvironment-1)选择元素，然后通过 (:checked)过滤器过滤掉它的检查状态。

它将返回选中元素对象的数组。如果数组中存在任何对象，那么 If 条件将得到满足。

小开

我用这个，在为我工作！

$("checkbox selector").click(function() {
if($(this).prop('checked')==true){
do what you need!
}
});
小开

简单，易于检查或未检查的条件

<input type="checkbox" id="ev-click" name="" value="" >


<script>
$( "#ev-click" ).click(function() {
if(this.checked){
alert('checked');
}
if(!this.checked){
alert('Unchecked');
}
});
</script>
小开

有两种方法可以检查条件。

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
// Put your code here if checkbox is checked
}

或者你也可以用这个

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
// Put your code here if checkbox is checked
}

我希望这对你有用。

小开

这是给出的最简单的方法

 <script type="text/javascript">


$(document).ready(function () {
$("#chk_selall").change("click", function () {


if (this.checked)
{
//do something
}
if (!this.checked)
{
//do something


}


});


});


</script>
小开

我知道这个问题已经得到了回答，但这仍然是一个很好的解决办法:

if ($("#checkbox").is(":checked")==false) {
//Do stuff here like: $(".span").html("<span>Lorem</span>");
}
小开 
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
if (item.is(":checked")==true) {
//execute your code here
}


else if (item.is(":not(:checked)"))
{
//execute your code here
}


});
小开 
if($("#checkbox1").prop('checked') == false){
alert('checkbox is not checked');
//do something
}
else
{
alert('checkbox is checked');
}
小开

我认为(使用 jQuery)检查复选框是否被选中的最简单方法是:

如选中:

if ($(this).is(':checked')) {
// I'm checked let's do something
}

如未经检查:

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

提交答案