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:。

＆＃13;

$("#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');
     }
 });

＆＃13;

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

＆＃13;

JQuery（3.3.1）复选框组合无法返回预期值

1 个答案: