如何修復循環以檢查是否選中了復選框，以及是否將值附加到字符串？

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>