javascript - 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');
    }
});

当我以相同的顺序选择和取消选择时，我的 fiddle 可以完美地工作，但是，如果我以与我选择它们的顺序不同的顺序取消选择复选框，它不会默认返回到原始类。我知道我的逻辑一定有缺陷，我只是找不到它。有什么想法吗？

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);
});

该版本只是显式检查两个复选框的状态并更新类以反射(reflect)状态。相同的处理程序可用于两个复选框。

请注意，旧版本的 IE 可能不会触发复选框的“更改”事件，直到复选框失去焦点，但您可以安全地使用“单击”代替。