jQuery的复选框选择顺序问题

Question

我有一个基本的背景图片和两个复选框。 我需要根据所选的复选框用正确的类替换背景图像（通过切换类）。 如果两个复选框都被选中，我需要它显示黑色背景。

http://jsfiddle.net/2k96D/6/

$('#ax_lab').change(function () {
    if ($('#ax_ov').is(':checked')) {
        $('.axial').toggleClass('axial_all');
    } else{
        $('.axial').toggleClass('axial_lab');
    }
});

$('#ax_ov').change(function () {
    if ($('#ax_lab').is(':checked')) {
        $('.axial').toggleClass('axial_all');
    } else{
        $('.axial').toggleClass('axial_over');
    }
});

当我以相同的顺序选择和取消选择时，我的提琴效果很好，但是，如果我以与选择它们的顺序不同的顺序取消选择复选框，则默认情况下它不会返回到原始类。 我知道我的逻辑上肯定有缺陷，我只是很难找到它。 有什么想法吗？

Answer 1

您需要对逻辑更加明确。 这是我所做的：

$(document).ready(function () {
    function updateAxialStatus() {
        var axOv = $('#ax_ov').prop('checked'),
            axLab = $('#ax_lab').prop('checked');

        $('.axial').removeClass('axial_all axial_lab axial_over');
        if (axOv && axLab)
            $('.axial').addClass('axial_all');
        else if (axOv)
            $('.axial').addClass('axial_over');
        else if (axLab)
            $('.axial').addClass('axial_lab');
    }

    $('#ax_lab, #ax_ov').change(updateAxialStatus);
});

该版本仅显式检查两个复选框的状态并更新类以反映该状态。 相同的处理程序可用于两个复选框。

请注意，在该复选框失去焦点之前，旧版本的IE可能不会触发该复选框的“更改”事件，但是您可以放心地使用“单击”。