用js实现bootstrap复选框组合读取label文本

可以通过以下代码实现：

HTML:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox1">
  <label class="form-check-label" for="checkbox1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox2">
  <label class="form-check-label" for="checkbox2">
    Option 2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox3">
  <label class="form-check-label" for="checkbox3">
    Option 3
  </label>
</div>

JS:

var checkboxes = document.querySelectorAll('.form-check-input');

checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        var checkedValues = [];
        
        checkboxes.forEach(function(cb) {
            var label = cb.nextElementSibling;
            if (cb.checked) {
                checkedValues.push(label.innerText);
            }
        });
        
        console.log(checkedValues);
    });
});

这段代码使用querySelectorAll从HTML中选择所有具有.form-check-input类的复选框，然后添加一个事件侦听器以侦听复选框的更改事件。每次复选框更改时，代码循环遍历所有复选框，如果它被选中，则获取其相邻的兄弟元素标签，并将标签的innerText添加到一个名为checkedValues的数组中。最后，它记录该数组。