Can't get loop to spit out a string of the values in checked checkboxes.
Basic Javascript.
I've tried to follow various other stackoverflow posts to no avail. This and This seemed to be what was closest to what I'm trying to make work.
The HTML is just a row of
<div class="help-days">MON<br><input type="checkbox" id="d0-field" value="Monday" aria-describedby="avail-help"></div>
I've tried
var element = document.getElementsByClassName('help-days');
for (var i = 0; i <= 6; i++) {
if (element[i].checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
and
for (var i = 0; i <= 6; i++) {
var element = document.getElementById('#d' + i + '-field')
if (element[i].checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
Below example outputs Monday Tuesday Wednesday Thursday Friday Saturday Sunday
which leads me to believe there's something about using HTMLCollection and for loops & checking checkboxes that I'm not quite grasping?
for (var i = 0; i <= 6; i++) {
var day = $('#d' + i + '-field').val();
if (day) {
days = days + ' ' + day;
}
}
I'm trying to create a string that appends a checkbox 'value' to the string, if the checkbox is checked.
Any help appreciated!
No need to include the #
character when you use document.getElementById
. The #
character is used with JQuery
And you don't need to write element[i].checked
, only element.checked
because element
is already a reference to your checkbox element.
for (var i = 0; i < 6; i++) {
var element = document.getElementById('d' + i + '-field')
if (element.checked) {
var day = element.value
days += ' ' + day;
}
}
document.getElementsByClassName('help-days');
this will return the list of div
s, and they don't have a checked
property, you'll need to select the checkboxes inside of them :
for (var i = 0; i < 2; i++) {
var checkbox = element[i].childNodes[2];
if (checkbox.checked) {
var day = $('#d' + i + '-field').val();
days = days + ' ' + day;
}
}
var days = ''; for (var i = 0; i < 3; i++) { var element = document.getElementById('d' + i + '-field') if (element.checked) { var day = element.value days += ' ' + day; } } console.log(days)
<div class="help-days">MON<br><input type="checkbox" id="d0-field" value="Monday" aria-describedby="avail-help" checked></div> <div class="help-days">TUE<br><input type="checkbox" id="d1-field" value="Tuesday" aria-describedby="avail-help" checked></div> <div class="help-days">WED<br><input type="checkbox" id="d2-field" value="Wednesday" aria-describedby="avail-help"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.