Jquery切换事件正在弄乱复选框值

Question

当用户点击复选框时,我正在使用Jquery的切换事件做一些事情,如下所示:

$('input#myId').toggle(
function(){
//do stuff  
},
function(){
//do other stuff    
}
);

问题是当我点击复选框时没有勾选复选框.(我在切换事件中添加的所有内容都正常工作.)

我尝试过以下方法:

$('input#myId').attr('checked', 'checked');

和

$(this).attr('checked', 'checked');

甚至简单

return true;

但没有任何工作.谁能告诉我哪里出错了？

编辑 - 感谢所有回复的人.除了检查属性的部分外,Dreas的回答几乎对我有用.这很完美(虽然它有点hacky)

$('input#myInput').change(function ()
{
    if(!$(this).hasClass("checked"))
    {
        //do stuff if the checkbox isn't checked
        $(this).addClass("checked");
        return;
    }

    //do stuff if the checkbox isn't checked
    $(this).removeClass('checked');
});

再次感谢所有回复的人.

Answer 1

使用change事件而不是toggle事件,如下所示:

$('input#myId').change(function () {
    if ($(this).attr("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});

Answer 2

虽然使用changeDreas Grech建议的事件处理程序是合适的,但它在IE 6和7中不能很好地工作,它change在焦点模糊之前不会触发事件(也就是说,直到你在复选框的区域外单击) .正如QuirksMode所说,"这是一个严重的错误".

您可能希望使用click事件处理程序,但这不适用于键盘导航.你也需要注册一个keyup处理程序......

另请参阅此相关问题.

我还没有找到一个好的跨浏览器解决方案,它支持鼠标点击和键盘激活复选框(并且不会触发太多事件).

关于检查是否选中复选框的解决方案checked,您可以使用HTML的checked属性,而不是添加自己的类:

$('input#myInput').change(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
    } else {
        //do stuff if the checkbox isn't checked
    }
});

如果选中该复选框,则任何浏览器都会将元素的checked属性设置为input值,"checked"如果未选中该复选框,则将其设置为null(或删除属性).

Answer 3

为什么不使用$ .is()？

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});