javascript - 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>

标签： javascriptjqueryfunctioncheckbox

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>