lundi 30 avril 2018

JQuery (3.3.1) checkbox combination fails to return expected value

Having a little trouble with JQuery (version 3.3.1) checkbox implementation. See code sample below.

The problem

Selecting every combination works flawlessly except one, and I can't seem to pinpoint flaws in the code. The console doesn't complain when selecting the nonworking combination either. Nonworking combination:

[✓] Check Box 1
[   ] Check Box 2
[✓] Check Box 3
[✓] Check Box 4

Things to keep in mind:

  • Same checkbox combo fails there.
  • Every other combo works perfectly and returns expected results
  • I'm working locally with the downloaded, uncompressed jquery-3.3.1.js. Because the source refers to JQuery 2.1.3, I also downloaded the uncompressed jquery-2.1.3.js file. Same checkbox combo fails when referring to either JQuery version.
  • Code from source was not changed at all on my local machine.

Seems there's some flaw in the actual source code but can't seem to pinpoint any syntax errors or anything esle missing.

 $("#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>



Aucun commentaire:

Enregistrer un commentaire