javascript - 如果 click() 或实际点击，jQuery 检查的值不同

Question

我有一个创建一些动态内容的复选框。

在页面加载时，我想预先创建动态内容，所以我调用了 click()。但是对于 click()，我的属性“checked”没有设置——它是在点击功能完成后设置的？？？通过真正的鼠标单击，在单击事件中设置属性“checked”。

jQuery.noConflict();
jQuery(document).ready(function(){

    jQuery("#myCheckbox").click(function(){
        if (jQuery(this).attr('checked')=='checked'){
            console.log('checkbox is checked');
            jQuery("#container").append("<p>Dynamic content</p>");
        } else {
            console.log('checkbox is not checked');
            jQuery("#container p").remove();
        }
    });

    console.log("before: "+jQuery('#myCheckbox').attr('checked'));
    jQuery("#myCheckbox").click();
    console.log("after: "+jQuery('#myCheckbox').attr('checked'));
});

http://jsfiddle.net/aschmutt/3WvAK/

我可以在当前的 Firefox、Chrome 和 IE 中重现这一点，所以这似乎是一种“预期行为”。但我不明白为什么...

是否已经有解决方法或解决方案？

Answer 1

请记住使用 jquery 的 prop 方法来设置复选框、单选按钮的 checked 属性。

试试这个，

jQuery.noConflict();
jQuery(document).ready(function(){

    jQuery("#myCheckbox").change(function(){
        if (jQuery(this).prop('checked') == true){
            console.log('checkbox is checked');
            jQuery("#container").append("<p>Dynamic content</p>");
        } else {
            console.log('checkbox is not checked');
            jQuery("#container p").remove();
        }
    });

    console.log("before: "+jQuery('#myCheckbox').attr('checked'));
    jQuery("#myCheckbox").prop("checked", true).change();
    console.log("after: "+jQuery('#myCheckbox').attr('checked'));
});