JavaScript实现Checkbox选定值获取及全选功能

在JavaScript中获取checkbox选定的值以及实现checkbox全选功能是初学者常见的需求之一。以下是一个完整的代码示例，展示了如何高效地实现这些功能。通过这个例子，您可以快速掌握checkbox值的获取方法及全选功能的实现，提升您的开发效率。

// 获取所有checkbox元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 获取选定的checkbox值
function getSelectedValues() {
    const selectedValues = [];
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            selectedValues.push(checkbox.value);
        }
    });
    return selectedValues;
}

// 全选/取消全选功能
const selectAllCheckbox = document.querySelector('#select-all');
selectAllCheckbox.addEventListener('change', function() {
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// 示例使用
document.querySelector('#get-values').addEventListener('click', () => {
    const selectedValues = getSelectedValues();
    console.log('选定的值:', selectedValues);
});

通过上述代码，您可以轻松实现checkbox选定值的获取和全选功能。希望这个示例对您有所帮助。