<div> 是 HTML 中的一個重要標簽，用于創建一個可視化的容器，將 HTML 文檔中的元素進行分組。這些元素可以是文本、圖片、表單、按鈕等等。<div> 標簽提供了很大的靈活性，使得我們可以通過 CSS 樣式對其進行自定義。在日常的開發中，經常會遇到需要在某個特定條件下為 <div> 元素添加一個打鉤效果的需求。本文將通過幾個代碼案例來詳細解釋如何使用 CSS 和 JavaScript 來實現 div 元素的選中打鉤效果。

案例一：

我們先來看一個簡單的案例，通過點擊 <div> 元素來選中或取消選中，并在選中狀態下添加一個打鉤的效果。

HTML 代碼：
<div id="myDiv">這是一個 DIV 元素</div>

CSS 代碼：
#myDiv {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
}
#myDiv.selected {
background-color: blue;
}
#myDiv.selected::after {
content: "\2713";
color: white;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}

JavaScript 代碼：
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
myDiv.classList.toggle('selected');
});

在上面的代碼中，我們創建了一個 <div> 元素并設置了其 id 屬性為 "myDiv"，然后定義了兩個 CSS 樣式。當 <div> 元素被選中時，通過添加 "selected" 類來改變背景色為藍色，并使用偽元素 "::after" 在 <div> 元素的右上角添加一個白色的打鉤圖標。最后使用 JavaScript 監聽 "click" 事件，通過調用 toggle 方法來切換 "selected" 類的添加與移除，從而實現選中或取消選中的效果。

案例二：

接下來，我們將使用 jQuery 庫來實現 div 元素的選中打鉤效果。

HTML 代碼：
<div id="myDiv">這是一個 DIV 元素</div>

CSS 代碼：
#myDiv {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
}
#myDiv.selected {
background-color: blue;
}
#myDiv.selected::after {
content: "\2713";
color: white;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}

JavaScript 代碼：
$('#myDiv').click(function() {
$(this).toggleClass('selected');
});

在上述代碼中，我們使用了 jQuery 庫的 $ 符號來選取 id 為 "myDiv" 的元素，并使用 click 事件來切換 "selected" 類的添加與移除，從而實現選中或取消選中的效果。其余的 CSS 樣式與之前的案例一樣。

以上是兩個簡單的案例，通過 CSS 和 JavaScript 實現了 div 元素的選中打鉤效果，并參考了其他真實案例的設計思路。通過這些案例的介紹，希望讀者能夠更好地理解并掌握 div 元素的選中打鉤效果的實現方法。