<div>多選效果是指在HTML中使用<div>標簽來實現多個選項同時選中的效果。通過使用CSS和JavaScript來控制<div>標簽的樣式和行為，可以實現多選效果。下面將通過幾個代碼案例來詳細解釋說明。</div>

案例1：基本的多選效果

<div class="checkbox">
<input type="checkbox" id="option1" name="option" value="option1">
<label for="option1">選項1</label>
<input type="checkbox" id="option2" name="option" value="option2">
<label for="option2">選項2</label>
<input type="checkbox" id="option3" name="option" value="option3">
<label for="option3">選項3</label>
</div>

<div>上面的代碼中，通過使用<input>和<label>標簽來創建復選框和標簽，并使用<div>標簽將它們包裹起來。</div>
<div>接下來，可以通過CSS來定義選中和未選中狀態的樣式：</div>

.checkbox input[type="checkbox"] {
display: none;
}
<br>
.checkbox label {
padding: 5px 10px;
background-color: #eee;
}
<br>
.checkbox input[type="checkbox"]:checked + label {
background-color: #00bcd4;
color: #fff;
}

<div>上面的代碼中，通過CSS選擇器來選擇選中和未選中狀態的復選框，并定義它們的樣式。</div>

案例2：全選和取消全選

<div class="checkbox">
<input type="checkbox" id="selectAll" name="selectAll" value="selectAll">
<label for="selectAll">全選</label>
<input type="checkbox" id="option4" name="option" value="option4">
<label for="option4">選項4</label>
<input type="checkbox" id="option5" name="option" value="option5">
<label for="option5">選項5</label>
</div>

<div>上面的代碼中，添加了一個用于全選的復選框，并且給每個選項都添加了相同的name屬性。</div>
<div>接下來，可以通過JavaScript來實現全選和取消全選的功能：</div>

var selectAllCheckbox = document.getElementById("selectAll");
var optionCheckboxes = document.getElementsByName("option");
<br>
selectAllCheckbox.addEventListener("change", function() {
if (selectAllCheckbox.checked) {
for (var i = 0; i < optionCheckboxes.length; i++) {
optionCheckboxes[i].checked = true;
}
} else {
for (var i = 0; i < optionCheckboxes.length; i++) {
optionCheckboxes[i].checked = false;
}
}
});

<div>上面的代碼通過addEventListener方法監聽全選復選框的change事件，并在事件發生時改變每個選項的checked屬性。</div>

案例3：限制選項數量

<div class="checkbox">
<input type="checkbox" id="option6" name="option" value="option6">
<label for="option6">選項6</label>
<input type="checkbox" id="option7" name="option" value="option7">
<label for="option7">選項7</label>
<input type="checkbox" id="option8" name="option" value="option8">
<label for="option8">選項8</label>
</div>

<div>上面的代碼中，包含了三個選項。</div>
<div>接下來，可以通過JavaScript來限制選中的選項數量：</div>

var optionCheckboxes = document.getElementsByName("option");
<br>
for (var i = 0; i < optionCheckboxes.length; i++) {
optionCheckboxes[i].addEventListener("change", function() {
var checkedCount = 0;
for (var j = 0; j < optionCheckboxes.length; j++) {
if (optionCheckboxes[j].checked) {
checkedCount++;
}
}
if (checkedCount > 2) {
this.checked = false;
}
});
}

<div>上面的代碼通過addEventListener方法監聽每個選項復選框的change事件，并在事件發生時統計已選中的選項數量。如果選中的數量大于2，將取消當前選項的選中狀態。</div>
<div>以上就是<div>多選效果的幾個代碼案例，通過使用CSS和JavaScript，可以實現豐富的多選效果，滿足不同的需求。</div>