Установка нескольких флажков для отображения похожих, но разных полей

У меня есть 3 флажка с 8 различными комбинациями и результатами.

• Если вы не выберете флажки, то дивы не будут отображаться.
• При выборе одного флажка отображается цветной div.
  Например; установив красный флажок.
• При установке двух флажков отображается div color1 + color2. Но не показывает ни один из одноцветных div.
  Например; при установке красного и зеленого флажков отображается красно-зеленый div. Но гарантирует, что и красный, и зеленый блоки div скрыты, поэтому отображается только один блок div.
• При установке всех флажков отображается div rgb. И не показывает никаких других div.

Это работает. Мне было интересно, можно ли это написать более эффективно?

$('input[type="checkbox"]').click(function () {
    $('.box').hide();
if ($('#red').is(':checked')) $('.red.box').show();
if ($('#green').is(':checked')) $('.green.box').show();
if ($('#blue').is(':checked')) $('.blue.box').show();    
       
if ($('#red').is(':checked') && $('#green').is(':checked')) $('.redgreen.box').show() && $('.red.box, .green.box').hide();

if ($('#red').is(':checked') && $('#blue').is(':checked')) $('.redblue.box').show() && $('.red.box, .blue.box').hide();

if ($('#green').is(':checked') && $('#blue').is(':checked')) $('.greenblue.box').show() && $('.green.box, .blue.box').hide();    

if ($('#red').is(':checked') && $('#green').is(':checked') && $('#blue').is(':checked'))  $('.rgb.box').show() && $('.red.box, .green.box, .greenblue, .redblue, .redgreen.box, .blue.box').hide();    

});

.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}

.redblue .redgreen .greenblue {
    border: 1px solid black;
}
.rgb {
    border: 1px dashed black;
}
.red {
    background: #ff0000;
}
.green {
    background: #00ff00;
}
.blue {
    background: #0000ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label>
        <input type="checkbox" id="red" name="colorCheckbox" value="red">red</label>
    <label>
        <input type="checkbox" id="green" name="colorCheckbox" value="green">green</label>
    <label>
        <input type="checkbox" id="blue" name="colorCheckbox" value="blue">blue</label>
</div>
<div class="red box"><strong>red</strong></div>
<div class="green box"><strong>green</strong></div>
<div class="blue box"><strong>blue</strong></div>

<div class="redgreen box"><strong>red green</strong></div>
<div class="redblue box"><strong>red blue</strong></div>
<div class="greenblue box"><strong>green blue</strong></div>

<div class="rgb box"><strong>rgb</strong></div>

Несколько примечаний к вашему коду:

• Если вам не нужна поддержка очень старых или нестандартных браузеров, и учитывая, что ваш проект не сильно зависит от jQuery, ванильный JavaScript может выполнять ту же работу без накладных расходов jQuery.
• При каждом щелчке флажка все цветные блоки div запрашиваются снова и снова (jQuery('.box')), в котором нет необходимости, поскольку в DOM нет изменений.
• Все флажки запрашиваются несколько раз, а не один раз.
• Структура «если-то» довольно громоздка: если установлен #red, отобразить .red.box. Затем, если также отмечен #green, скройте .red.box и покажите .redgreen.box. Затем, если установлен флажок #blue, скройте .redgreen.box и покажите .rbg.box. Один из способов улучшить эту часть — сначала точно определить, какой из флажков следует установить, и отображать только этот флажок.
• Лично я бы использовал комбинации .red/.green/.blue классы вместо того, чтобы помещать разные классы для каждой комбинации (например, .box.red.green.blue вместо .box.rgb). Таким образом, каждый флажок соответствует определенному классу div.

Вот мой подход к проблеме / домашнему заданию / упражнению, который касается большинства вышеперечисленных замечаний (без изменений CSS / HTML; все еще используется jQuery):

        const RED = 1;
        const GREEN = 2;
        const BLUE = 4;

        const DIV_CLASSES_MAP = [null, '.red', '.green', '.redgreen', '.blue', '.redblue', '.greenblue', '.rgb'];
        const DIVS = $('.box');
        const RED_TICK = $('#red');
        const GREEN_TICK = $('#green');
        const BLUE_TICK = $('#blue');

        let activeDiv = DIVS.filter(':visible');
        $('input[name="colorCheckbox"]').on('click', onCheckboxChange);

        function onCheckboxChange() {
            const redBit = RED_TICK.is(':checked') ? RED : 0;
            const greenBit = GREEN_TICK.is(':checked') ? GREEN : 0;
            const blueBit = BLUE_TICK.is(':checked') ? BLUE : 0;
            const mask = redBit + greenBit + blueBit;
            const activeClass = DIV_CLASSES_MAP[mask];
            activeDiv.hide();
            activeDiv = DIVS.filter(activeClass).show();
        }