1

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

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

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

4

1 回答 1

2

你需要更明确的逻辑。这是我所做的：

$(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 可能不会触发复选框的“更改”事件，但您可以安全地使用“单击”来代替。

于 2013-10-23T15:51:17.113 回答