復選框是一種常用的 HTML 元素，它允許用戶從多個選項中選擇一個或多個。在 web 開發中，我們可以使用復選框實現一些有趣的互動效果，比如改變頁面的背景顏色。下面我們將介紹如何使用 CSS 和 JavaScript 實現這一效果。

/* CSS 代碼 */
body {
background-color: #fff;
}
input[type=checkbox]:checked + label {
background-color: #333;
color: #fff;
}
/* HTML 代碼 */點擊我改變背景顏色

上面的 CSS 代碼通過選擇器input[type=checkbox]:checked + label對選中狀態的復選框相鄰的label元素應用樣式。這里我們將背景顏色改為黑色，前景色為白色。

接下來，我們需要使用 JavaScript 監聽復選框的狀態改變事件，當復選框被選中或取消選中時，動態修改頁面的背景顏色。

/* JavaScript 代碼 */
const checkbox = document.getElementById('background-color');
checkbox.addEventListener('change', function() {
const body = document.querySelector('body');
if (checkbox.checked) {
body.style.backgroundColor = '#333';
} else {
body.style.backgroundColor = '#fff';
}
})

這里我們使用querySelector方法獲取body元素，再通過修改style.backgroundColor屬性實現改變背景顏色。

最后，我們將 HTML、CSS 和 JavaScript 集成在一起，就可以在網頁中實現復選框改變背景顏色的效果。