jQuery 1.6 或者更新版本
要检查元素的复选框属性，建议使用 prop() 方法：
$('#checkbox').prop('checked'); //Boolean true
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<input id="checkbox1" type="checkbox" name="one" value="1">
<input id="checkbox2" type="checkbox" name="two" value="2">
<input id="checkbox3" type="checkbox" name="thr" value="3">
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if($(this).prop("checked") == true) {
alert("Checkbox is checked.");
}
else if($(this).prop("checked") == false) {
alert("Checkbox is unchecked.");
}
});
});
</script>
</body>
</html>
第二个是 is() 方法，它使代码更具可读性（例如在 if 语句中）：
$('#checkbox').is(':checked'); //Boolean true
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<input id="checkbox1" type="checkbox" name="one" value="1">
<input id="checkbox2" type="checkbox" name="two" value="2">
<input id="checkbox3" type="checkbox" name="thr" value="3">
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if($(this).is(":checked")) {
alert("Checkbox is checked.");
}
else if($(this).is(":not(:checked)")) {
alert("Checkbox is unchecked.");
}
});
});
</script>
</body>
</html>
第三个使用 length() 和 size() 方法：
$('#checkbox:checked').length; //Integer >0
$('#checkbox:checked').size(); //.size() 可以使用 .length代替
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id="checkList">
<input id="checkbox1" type="checkbox" name="one" value="1" />
<input id="checkbox2" type="checkbox" name="two" value="2" />
<input id="checkbox3" type="checkbox" name="thr" value="3" />
</div>
<input type="button" id="btnCheck" value="Check" />
<script type="text/javascript">
$(function() {
$("#btnCheck").click(function() {
let checked = $("#checkList input[type=checkbox]:checked")
.length;
if(checked > 0) {
alert(checked + " CheckBoxe(s) are checked.");
return true;
} else {
alert("Please select CheckBoxe(s).");
return false;
}
});
});
</script>
</body>
</html>
第四种方法是获取DOM对象引用：
$('#checkbox').get(0).checked; //Boolean true
$('#checkbox')[0].checked; //Boolean true
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id="checkList">
<input id="checkbox1" type="checkbox" name="one" value="1" />
</div>
<input type="button" id="btnCheck" value="Check" />
<input type="button" id="btnUnCheck" value="UnCheck" />
<script>
$('#btnCheck').on('click', function() {
$('#checkbox1').get(0).checked = true;
});
$('#btnUnCheck').on('click', function() {
$('#checkbox1').get(0).checked = false;
});
</script>
</body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id="checkList">
<input id="checkbox1" type="checkbox" name="one" value="1" />
<input id="checkbox2" type="checkbox" name="two" value="2" />
<input id="checkbox3" type="checkbox" name="thr" value="3" />
</div>
<input type="button" id="btnCheck" value="Check" />
<input type="button" id="btnUnCheck" value="UnCheck" />
<script>
$('#btnCheck').on('click', function() {
$('input')[0].checked = true;
});
$('#btnUnCheck').on('click', function() {
$('input')[0].checked = false;
});
</script>
</body>
</html>
属性Attributes 与属性Properties的区别
prop() 方法提供了一种获取 jQuery 1.6 版本的property值的方法，而 attr() 方法检索attributes的值。
checked是一个布尔attribute属性，这意味着如果该attribute属性存在，则相应的属性为true，即使attribute属性没有值或者被设置为空字符串值或者“假”。
checked的attribute属性值不会随着复选框的状态而改变，而checked的 属性会改变。
本教程介绍了几种检查复选框是否被选中的方法。
所有方法都做同样的事情，但方法因我们使用的 jQuery 版本而异。
让我们考虑以下示例，看看如何使用不同版本的 jQuery 测试复选框：
<input id="checkbox" type="checkbox" name="one" value="1" checked="checked"> <input id="checkbox2" type="checkbox" name="two" value="2"> <input id="checkbox3" type="checkbox" name="thr" value="3">
1.6 以下版本
在版本高达 1.5 的情况下，我们应该使用 .attr() 方法而不是 prop()：
$('#checkbox').attr('checked'); //Boolean true
例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox" checked="checked" />
<div id="mydiv">
<input type="checkbox" id="Uncheckbox" />
</div>
<script>
$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");
$("#Uncheckbox").attr("checked") ? alert("Checked") : alert("Unchecked");
</script>
</body>
</html>
用于 1.6 版的其他三种方法也可用于 1.6 版以下的版本。
日期：2020-06-02 22:16:27 来源：oir作者：oir