如何修复循环以检查是否选中了复选框，以及是否将值附加到字符串？

Question

无法循环以在选中的复选框中吐出一串值。

基本的Javascript。

我试图遵循各种其他stackoverflow帖子都无济于事。 这和这似乎与我正在尝试的工作最接近。

HTML只是一行

<div class="help-days">MON<br><input type="checkbox" id="d0-field" value="Monday" aria-describedby="avail-help"></div>

我试过了

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

和

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

下面的示例输出Monday Tuesday Wednesday Thursday Friday Saturday Sunday ，这使我相信关于使用HTMLCollection以及关于循环和检查复选框的某些事情我不太了解？

for (var i = 0; i <= 6; i++) {
    var day = $('#d' + i + '-field').val();
    if (day) {
        days = days + ' ' + day;
    }
}

我正在尝试创建一个字符串，如果该复选框已选中，则在该字符串后附加一个复选框“值”。

任何帮助表示赞赏！

Answer 1

使用document.getElementById时无需包含#字符。 #字符与JQuery一起使用

而且您不需要编写element[i].checked ，只需编写element.checked因为element已经是对您的checkbox元素的引用。

for (var i = 0; i < 6; i++) {
  var element = document.getElementById('d' + i + '-field')

  if (element.checked) {
    var day = element.value
    days += ' ' + day;
  }
}

Answer 2

document.getElementsByClassName('help-days'); 这将返回div的列表，并且它们没有checked属性，您需要选中其中的复选框：

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>