下午写JS验证,有一个需求需要判断 checkbox是否被选择,查阅相关资料后,总结以下4种方法,分享给大家。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 判断checkbox是否被选中 4种方法</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('#agree').on('click', function(){
if($("input[type='checkbox']").is(':checked')){ // 选中返回true,未选中返回false
console.log('已选中');
}else{
console.log('未选中');
}
})
$('#agree2').on('change', function(){ // 可以是 onchange ,也可以是 onclick
if($('#agree2').attr('checked')){
console.log('已选中');
}else{
console.log('未选中');
}
})
$('#agree3').on('change', function(){
if($("#agree3").get(0).checked){
console.log('已选中');
}else{
console.log('未选中');
}
})
$('#agree4').on('change', function(){
if($("#agree4").prop('checked')){
console.log('已选中');
}else{
console.log('未选中');
}
})
})
</script>
</head>
<body>
<input type="checkbox" name="agree" id="agree"> 同意此协议 <br> <br>
<input type="checkbox" name="agree" id="agree2"> 同意此协议2 <br> <br>
<input type="checkbox" name="agree" id="agree3"> 同意此协议3 <br> <br>
<input type="checkbox" name="agree" id="agree4"> 同意此协议4 <br> <br>
</body>
</html>