<div> checkbox 聯動主要是指在一組 checkbox 選項中，當某一個 checkbox 的狀態發生變化時，會同時影響到其他 checkbox 的選中狀態。這種聯動效果在實際開發中非常常見，特別是在需要對多個選項進行操作或者多個選項之間存在依賴關系的場景中。在本文中，我們將使用幾個代碼案例來詳細解釋和說明 div checkbox 聯動的實現方法，并參考其他文章中的真實案例。

案例一：全選/全不選

為了實現全選和全不選的功能，我們可以使用 JavaScript 來控制 checkbox 的選中狀態。下面是一個使用 div checkbox 聯動的案例。

<div id="checkbox-container">
<label>
<input type="checkbox" id="select-all" />
全選/全不選
</label>
<label>
<input type="checkbox" class="sub-checkbox" />
選項1
</label>
<label>
<input type="checkbox" class="sub-checkbox" />
選項2
</label>
</div>
<br>
<script>
document.getElementById('select-all').addEventListener('change', function() {
var checkboxes = document.getElementsByClassName('sub-checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
</script>

在上面的案例中，我們給全選/全不選的 checkbox 添加了一個事件監聽器，在狀態發生變化時，遍歷所有的子 checkbox，并將它們的選中狀態設置為全選/全不選的狀態。

案例二：依賴關系聯動

在一些場景中，某些選項的選擇與其他選項的選擇是有依賴關系的。例如，在一個購物網站的商品詳情頁中，用戶需要選擇商品的顏色和尺碼，但是某些顏色或尺碼可能并不適用于所有的商品。

<div id="checkbox-container">
<label>
<input type="checkbox" class="color-checkbox" value="紅色" />
紅色
</label>
<label>
<input type="checkbox" class="color-checkbox" value="藍色" />
藍色
</label>
<label>
<input type="checkbox" class="size-checkbox" value="S" />
S
</label>
<label>
<input type="checkbox" class="size-checkbox" value="M" />
M
</label>
</div>
<br>
<script>
var colorCheckboxes = document.getElementsByClassName('color-checkbox');
var sizeCheckboxes = document.getElementsByClassName('size-checkbox');
<br>
  for (var i = 0; i < colorCheckboxes.length; i++) {
colorCheckboxes[i].addEventListener('change', function() {
if (this.checked) {
for (var j = 0; j < sizeCheckboxes.length; j++) {
sizeCheckboxes[j].disabled = false;
}
} else {
for (var j = 0; j < sizeCheckboxes.length; j++) {
sizeCheckboxes[j].disabled = true;
}
}
});
}
</script>

在上面的案例中，當用戶選擇了某個顏色時，尺碼選項會解鎖；當用戶取消選中顏色時，尺碼選項會被禁用。

通過以上的兩個案例，我們可以看到如何使用 div checkbox 聯動來實現不同的功能。在實際開發中，div checkbox 聯動是一個非常常用且有效的方式，能夠提升用戶體驗，并簡化用戶操作。當然，在實際開發中，還可以根據具體的需求來進行更加復雜的聯動操作，如根據用戶選擇的 checkbox 動態生成相關選項等。