基于复选框计数的Div衰减

Question

最近，我想出了一些代码来处理某些div的淡入和淡出，具体取决于用户选中的复选框的数量。

尽管它功能正常且有用，但我想知道是否有人收到反馈，以查看是否可以将其转换为使用switch / case块的方式，这可能是比使用太多if / else语句更好的方法？ 是否有人对如何缩短此函数的编写有意见？

$('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;

        if (boxChecked == 11) {
            $('.column-3').fadeTo(500, 1.0);
            $('.column-1, .column-2').fadeTo(500, 0.4);
        }
        if (boxChecked == 10) {
            $('.column-2').fadeTo(500, 1.0);
            $('.column-1, .column-3').fadeTo(500, 0.4);
        }         
        else if (boxChecked == 6) {
            $('.column-2').fadeTo(500, 1.0);
            $('.column-1, .column-3').fadeTo(500, 0.4);
        }
        else if (boxChecked == 5) {
             $('.column-1').fadeTo(500, 1.0);
            $('.column-2, .column-3').fadeTo(500, 0.4);
        }
        else if (boxChecked < 5) {
            $('.column-2, .column-3').fadeTo(500, 1.0);
        }
});

Answer 1

$('input:checkbox').change(function () {
    var boxChecked = $('input:checkbox:checked').length;
    switch (boxChecked) {
        case 11:
            $('.column-3').fadeTo(500, 1.0);
            $('.column-1, .column-2').fadeTo(500, 0.4);
            break;
        case 10:
            $('.column-2').fadeTo(500, 1.0);
            $('.column-1, .column-3').fadeTo(500, 0.4);
            break;
        case 6:
            $('.column-2').fadeTo(500, 1.0);
            $('.column-1, .column-3').fadeTo(500, 0.4);
            break;
        case 5:
            $('.column-1').fadeTo(500, 1.0);
            $('.column-2, .column-3').fadeTo(500, 0.4);
            break;
        case (boxChecked < 5):
            $('.column-2, .column-3').fadeTo(500, 1.0);
            break;
    }
});