Комбинация флажков JQuery (3.3.1) не может вернуть ожидаемое значение

Question

Возникли небольшие проблемы с реализацией флажка JQuery (версия 3.3.1). См. Пример кода ниже.

Проблема

Выбор каждой комбинации работает безупречно, кроме одной, и я не могу точно определить недостатки в коде. Консоль также не жалуется при выборе нерабочей комбинации. Нерабочее сочетание:

[✓] Флажок 1
[] Флажок 2
[✓] Флажок 3
[✓] Флажок 4

Что нужно иметь в виду:

• Там же не работает комбо-флажок.
• Любая другая комбинация работает отлично и возвращает ожидаемые результаты
• Я работаю локально с загруженным, без сжатия jquery-3.3.1.js. Поскольку источник ссылается на JQuery 2.1.3, я также скачал несжатый файл jquery-2.1.3.js. При использовании той или иной версии JQuery сбои одного и того же флажка не выполняются.
• Код из исходного кода вообще не менялся на моей локальной машине.

Кажется, в исходном коде есть какой-то недостаток, но, похоже, он не может точно определить какие-либо синтаксические ошибки или что-либо еще упущенное.

 $("#doIt").on("click", function () {
     var check = $('input:checked:checkbox[name=cc]');
     var id = '';
     $.each($(check), function (index) {
         id += $(this).attr('id');
     });
     if ($(check).is(':checked')) {
         switch (id) {
             case 'c1':
                 console.log(id);
                 break;
             case 'c2':
                 console.log(id);
                 break;
             case 'c3':
                 console.log(id);
                 break;
             case 'c4':
                 console.log(id);
                 break;
             case 'c1c2':
                 console.log(id);
                 break;
             case 'c1c3':
                 console.log(id);
                 break;
             case 'c1c4':
                 console.log(id);
                 break;
             case 'c2c3':
                 console.log(id);
                 break;
             case 'c2c4':
                 console.log(id);
                 break;
             case 'c3c4':
                 console.log(id);
                 break;
             case 'c1c2c3':
                 console.log(id);
                 break;
             case 'c1c2c4':
                 console.log(id);
                 break;
             case 'c2c3c4':
                 console.log(id);
                 break;
             case 'c1c2c3c4':
                 console.log(id);
                 break;
         }
     } else {
         alert('Un Checked');
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<br />
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
<br />
<input type="checkbox" id="c3" name="cc" />
<label for="c3"><span></span>Check Box 3</label>
<br />
<input type="checkbox" id="c4" name="cc" />
<label for="c4"><span></span>Check Box 4</label>
<br />
<button id="doIt" type="button">Click Me!</button>

Answer 1

Это не имеет ничего общего с JQuery. Вы просто пропустили ветку case, которая соответствует этой комбинации.

Вам необходимо добавить: case c1c3c4:.

$("#doIt").on("click", function () {
     var check = $("input[name='cc']:checked");
     var id = '';
     $.each($(check), function (index) {
         id += $(this).attr('id');
     });
     if ($(check).is(':checked')) {
         switch (id) {
             case 'c1':
                 console.log(id);
                 break;
             case 'c2':
                 console.log(id);
                 break;
             case 'c3':
                 console.log(id);
                 break;
             case 'c4':
                 console.log(id);
                 break;
             case 'c1c2':
                 console.log(id);
                 break;
             case 'c1c3':
                 console.log(id);
                 break;
             case 'c1c4':
                 console.log(id);
                 break;
             case 'c2c3':
                 console.log(id);
                 break;
             case 'c2c4':
                 console.log(id);
                 break;
             case 'c3c4':
                 console.log(id);
                 break;
             case 'c1c2c3':
                 console.log(id);
                 break;
             // You were missing this    
             case 'c1c3c4':
                 console.log(id);
                 break;                 
             case 'c1c2c4':
                 console.log(id);
                 break;
             case 'c2c3c4':
                 console.log(id);
                 break;
             case 'c1c2c3c4':
                 console.log(id);
                 break;
         }
     } else {
         alert('Un Checked');
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<br />
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
<br />
<input type="checkbox" id="c3" name="cc" />
<label for="c3"><span></span>Check Box 3</label>
<br />
<input type="checkbox" id="c4" name="cc" />
<label for="c4"><span></span>Check Box 4</label>
<br />
<button id="doIt" type="button">Click Me!</button>