如何在单击复选框时灰显未选中的复选框标签？

要在单击复选框时灰显未选中的复选框标签，可以通过JavaScript和CSS来实现。以下是一个简单的示例代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Gray Out</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox1" class="checkbox">
        <label for="checkbox1">Option 1</label>
    </div>
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox2" class="checkbox">
        <label for="checkbox2">Option 2</label>
    </div>
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox3" class="checkbox">
        <label for="checkbox3">Option 3</label>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.checkbox-container {
    margin: 10px 0;
}

.checkbox:checked + label {
    color: #ccc;
    text-decoration: line-through;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const labels = document.querySelectorAll('label');
            labels.forEach(label => {
                if (checkbox.checked) {
                    label.style.color = '#ccc';
                    label.style.textDecoration = 'line-through';
                } else {
                    label.style.color = '';
                    label.style.textDecoration = '';
                }
            });
        });
    });
});