无法控制复选框检查状态 - jquery

时间:2010-11-29 19:29:03

标签: jquery

我无法获得此onClick事件来控制复选框的已检查状态..有什么想法吗?

        init: function () {
            $('.billing input[type="checkbox"]').bind('click', function (e) {
                e.preventDefault();
                iKeyless.page.toggleShippingForm($(e.currentTarget));
            });
        },
        toggleShippingForm: function (el) {
            if (el.attr('checked')) {
                $('.shipping').parents('.yui-u').addClass('hide');
                el.attr('checked', false);
            } else {
                $('.shipping').parents('.yui-u').removeClass('hide');
                el.attr('checked', true);
            }
        }

加载选中的复选框,无论我做什么,它都会保持检查...

1 个答案:

答案 0 :(得分:0)

它应该只是this传入以引用<input>元素...虽然你不需要jQuery对象,但这是一个工作版本:

init: function () {
    $('.billing input[type="checkbox"]').bind('click', function (e) {
        e.preventDefault();
        iKeyless.page.toggleShippingForm($(this));
    });
},
toggleShippingForm: function (el) {
    if (el.attr('checked')) {
        $('.shipping').parents('.yui-u').addClass('hide');
        el.attr('checked', false);
    } else {
        $('.shipping').parents('.yui-u').removeClass('hide');
        el.attr('checked', true);
    }
}

但由于.checked是一个DOM属性,你可以这样做(不转换为jQuery对象):

init: function () {
    $('.billing input[type="checkbox"]').change(function (e) {
        e.preventDefault();
        iKeyless.page.toggleShippingForm(this);
    });
},
toggleShippingForm: function (el) {
    $('.shipping').parents('.yui-u').toggleClass('hide', el.checked);
}

该元素已经更改了它的.checked状态...只需在change事件中使用它即可。如果需要,请将.toggleClass('hide', el.checked)更改为.toggleClass('hide', !el.checked),具体取决于可见的方式。