复选框切换状态仅触发if分支，请求排查jQuery代码错误

嘿，我一眼就看到你的代码里有两个小问题，导致不管勾选还是取消都只触发if分支的提示：

错误点拆解 #

• 选择器使用错误：你用了$('#qn')，但qn是存储当前复选框id的变量，这里应该把变量和选择器拼接成$('#' + qn)，否则代码会去寻找id为qn的元素（而不是你点击的那个复选框）。
• prop方法的误用：prop('checked', true)是设置复选框为选中状态的写法，不是判断是否选中。要判断复选框是否被选中，应该用prop('checked')（它会返回布尔值true或false），或者更直接的this.checked（因为this就是当前触发事件的复选框元素）。

修正后的完整代码 #

HTML/JS部分 #

<html>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.checks').change(function(){
        var qn = $(this).attr('id');
        // 直接用this.checked判断，更高效
        if(this.checked) {
            alert('question '+qn+' checked');
        } else {
            alert('question '+qn+' Unchecked');
        }
    });
});
</script>
</html>

PHP部分 #

<?php
for($i=1;$i<=5;$i++) {
    echo"<input type='checkbox' id='$i' class='checks' />Question-$i<br>";
}
?>

额外优化建议 #

你还可以把$(this).attr('id')换成this.id，因为直接访问DOM元素的属性比用jQuery包装后调用方法更高效，代码会变成：

var qn = this.id;

内容的提问来源于stack exchange，提问作者NRIIT EXAMCELL