Question

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

$('#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可能无法触发复选框的“更改”事件，直到复选框失去焦点，但您可以安全地使用“点击”。

使用jquery复选框选择顺序问题

1 个答案: