復選框是web開發中比較常見的元素之一，其可以讓用戶在多選項中進行選擇。在用戶勾選這些選項時，我們通常需要使用javascript來捕捉用戶的操作以便進行后續處理。

首先，我們來看一下最基本的用法：

<input type="checkbox" id="option1" value="Option 1">
<label for="option1">Option 1</label>

上面的代碼片段含有一個復選框和一個標簽，標簽通過與復選框id的對應來實現對復選框的關聯。接下來我們通過javascript來獲取和處理選中狀態。

const option1 = document.getElementById('option1');
option1.addEventListener('change', function(){
if(this.checked){
console.log('選擇了該選項');
}else{
console.log('取消了該選項');
}
});

上述代碼首先通過getElementById獲取了id為option1的復選框元素，接下來使用addEventListener來添加了一個change事件的監聽器。當用戶改變了選中狀態時，如果該選項被選中，將會輸出"選擇了該選項"，否則將會輸出"取消了該選項"。

通過上面的方法，我們可以對單個復選框元素進行監聽，但如果我們需要對多個復選框進行監聽該怎么做呢？接下來，我們使用循環語句來演示這樣的操作。

const options = document.querySelectorAll('input[type="checkbox"]');
options.forEach(function(option){
option.addEventListener('change', function(){
if(this.checked){
console.log('選擇了該選項');
}else{
console.log('取消了該選項');
}
});
});

上述代碼通過querySelectorAll獲取了所有的類型為checkbox的input元素，并使用forEach循環來對每一個元素添加change事件監聽器。當然，我們也可以使用for循環來達到相同的效果。

除了監聽復選框的選中狀態之外，我們也需要對選中狀態進行操作，例如：勾選某一個選項時將其它選項取消勾選。下面我們使用以下示例的html代碼來進行演示。

<div class="checkbox-group">
<input type="checkbox" id="option1" value="Option 1">
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" value="Option 2">
<label for="option2">Option 2</label>
<input type="checkbox" id="option3" value="Option 3">
<label for="option3">Option 3</label>
</div>

上述代碼片段含有一個class為checkbox-group的元素和三個復選框及其對應的標簽。我們期望的效果是：當我們勾選了其中的某一個選項時，其它的選項將會取消勾選。

const options = document.querySelectorAll('.checkbox-group input[type="checkbox"]');
options.forEach(function(option){
option.addEventListener('change', function(){
if(this.checked){
options.forEach(function(otherOption){
if(otherOption !== option){
otherOption.checked = false;
}
});
}
});
});

上述代碼通過querySelectorAll獲取了class為checkbox-group的元素中所有類型為checkbox的input元素，并使用forEach循環來對每一個元素添加change事件監聽器。當我們勾選某一個選項時，代碼將會遍歷其它選項并將被勾選的選項以外的全部取消勾選。

當然，以上只是javascript處理復選框選中的簡單應用，我們還可以通過腳本來根據不同的業務場景進行更加復雜的操作。