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