視頻地址：http://v.qq.com/page/m/8/c/m0150izlt8c.html
大家好，歡迎來到【三石jQuery視頻教程】，我是您的老朋友 - 三生石上。
今天，我們要通過基本的HTML、CSS、jQuery以及字體庫FontAwesome來實現復選框和單選框，先來看下最終的產品：
需要特別注意的是，在這個例子中，我們可以通過 TAB鍵來使復選框或者單選框獲取焦點，並將其顏色改為綠色。
Step1：網站目錄
網站目錄非常簡單，包含三部分：lesson2.html文件、lib目錄。
其中 lesson1.html 包含了一個頁面最基本的組成部分，正確的設置 DOCTYPE 有助於頁面在現代瀏覽器中正確渲染。
<!DOCTYPE html>
<html>
<head>
<title>02.創建FontAwesome復選框和單選框 - 三石jQuery視頻教程</title>
</head>
<body>
</body>
</html>
lib目錄僅包含了最新的 jQuery 庫；以及最新的 FontAwesome 庫（CSS文件和相應的字體文件）。
Step2：頁面結構
為頁面添加基本的 html 標簽，使用列表標簽 ul-li 進行組織。
- 在 label 標簽內放置 input 和文本，可以實現點擊文本時選中相應 input 的效果
- 使用 checked="checked" 屬性，來指定默認的選中項
- 單選框列表通過 name 屬性進行分組（同一個分組內的單選框，同時只能有一個處於選中狀態）
<!DOCTYPE html>
<html>
<head>
<title>02.創建FontAwesome復選框和單選框 - 三石jQuery視頻教程</title>
</head>
<body>
<div id="main">
<h2>
02.創建FontAwesome復選框和單選框
</h2>
<h4>
復選框列表
</h4>
<ul>
<li>
<label>
<input type="checkbox">
復選框一
</label>
</li>
<li>
<label>
<input type="checkbox" checked="checked">
復選框二
</label>
</li>
<li>
<label>
<input type="checkbox">
復選框三
</label>
</li>
</ul>
<h4>
單選框列表
</h4>
<ul>
<li>
<label>
<input name="group1" type="radio">
單選框一
</label>
</li>
<li>
<label>
<input name="group1" type="radio" checked="checked">
單選框二
</label>
</li>
<li>
<label>
<input name="group1" type="radio">
單選框三
</label>
</li>
</ul>
</div>
</body>
</html>
此時的頁面顯示效果：
Step3：CSS樣式
下面我們來創建基本的 CSS 樣式，讓這個默認顯示看起來更加專業和美觀，我們所做的努力包含：
- 頁面背景設為非常淺的灰色（#efefef）
- 主體內容加上了邊框和白色背景
- 主體內容居中（margin-left 和 margin-right 設為 auto）
- 清空無序列表 ul-li 的默認樣式
<style>
body {
background-color: #efefef;
}
#main {
border: solid 1px #ccc;
padding: 10px;
background-color: #fff;
max-width: 500px;
margin: 100px auto;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
</style>
此時的頁面顯示效果：
Step4：引入FontAwesome字體
在頁面 head 中添加對 FontAwesome 字體的引用：
<link href="lib/fa/css/font-awesome.css" rel="stylesheet">
在頁面底部引入 jQuery 庫，並在 DOMReady 中動態添加字體圖標到每一個復選框或者單選框的后面：
<script>
$(function() {
$('[type=checkbox],[type=radio]').each(function() {
var checkEl = $(this);
$('<i>', {
'class': 'fa fa-check'
}).insertAfter(checkEl);
});
});
</script>
其中CSS 類 fa 是每個圖標字體所必須的， fa-check 指定了某個具體的圖標字體。
此時的頁面效果：
Step5：自定義復選框和單選框 CSS 類
雖然我們可以直接使用 FontAwesome 預定義的圖標字體 CSS 類，比如：
- 復選框：fa-square-o
- 選中的復選框：fa-check-square-o
- 單選框：fa-circle-o
- 選中的單選框：fa-dot-circle-o
但是如果直接這樣來引用的話，會讓 JavaScript 代碼變得很乏味並且容易出錯，比如將復選框改為選中狀態：
checkIconEl.addClass('fa-check-square-o').removeClass('fa-square-o');
因此，我們決定自定義 CSS 類，來實現復選框的字體圖標，我們所期望的復選框的 HTML 結構：
<label> <input type="checkbox"> <i class="fa checkbox"> 復選框一 </label>
注意：這里使用 checkbox 字符串作為圖標字體的 CSS 類，不是隨意寫的。這個字符串正好就是 input 的 type 屬性，從而可以簡化 JavaScript 代碼。
相應的，選中的復選框的 HTML 結構：
<label class="checked"> <input type="checkbox"> <i class="fa checkbox"> 復選框一 </label>
下面，我們就可以根據 FontAwesome 官網頁面來定義我們自己需要的 CSS 類：
.fa.checkbox:before {
content: "\f096";
}
label.checked .fa.checkbox:before {
content: "\f046";
}
.fa.radio:before {
content: "\f10c";
}
label.checked .fa.radio:before {
content: "\f192";
}
Step6：復選框和單選框的初始狀態
根據前面假設的 HTML 結構和自定義圖標 CSS，我們可以完成 DOMReady 的初始化操作：
$(function() {
$('[type=checkbox],[type=radio]').each(function() {
var checkEl = $(this);
$('<i>', {
'class': 'fa ' + checkEl.attr('type')
}).insertAfter(checkEl);
if(checkEl.is(':checked')) {
checkEl.parent('label').addClass('checked');
}
})
});
});
這里有幾個注意點：
- input 的 type 屬性剛好作為字體圖標的 CSS 名稱（checkbox 和 radio）
- 使用 jQuery 提供的 is(':checked') 來判斷復選框或者單選框是否處於選中狀態
- 通過 parent 函數來查找某個元素的直接父元素（immediate parent）
頁面的初始效果：
Step7：同步復選框和單選框狀態到字體圖標
下面我們來完整字體圖標的狀態同步，首選注冊 change 事件：
$('[type=checkbox],[type=radio]').change(function() {
var checkEl = $(this);
var checked = checkEl.is(':checked');
var labelEl = checkEl.parent('label');
if(checkEl.is('[type=checkbox]')) {
// checkbox
} else {
// radio
}
});
在 change 事件中，需要當前事件的一些上下文變量：
- checkEl：當前點擊的復選框或者單選框
- checked：當前輸入框是否選中
- labelEl：當前輸入框的直接父元素（label標簽）
還需要知道當前點擊的是復選框還是單選框，從而進行不同的處理，復選框的處理比較簡單：
if(checked) {
labelEl.addClass('checked');
} else {
labelEl.removeClass('checked');
}
單選框的處理相對復雜點，因為我們在每次選中單選框時，都要先清空同一分組內的其他單選框的狀態：
var radioName = checkEl.attr('name');
var radioEls = $('[type=radio][name='+ radioName +']');
radioEls.parent('label').removeClass('checked');
labelEl.addClass('checked');
最后，我們只需要隱藏前面的 input 輸入框就行了：
[type=checkbox],
[type=radio] {
display: none;
}
此時的頁面效果：
Step8：響應TAB鍵，以及焦點樣式
如果我們的示例就此結束，似乎也很完整。但是缺少一個重要的功能，此時的復選框和單選框不再響應 TAB鍵了。
我們分別在頁面頂部和底部放置一個 input[type=text]，就能方便的看到效果了，在第一個文本輸入框按下 TAB鍵，會直接跳轉到第二個文本輸入框：
怎么辦？
應該是 display:none 導致 input[type=checkbox] 不再響應 TAB鍵了，但是我們必須要把他隱藏掉才行啊！
沒關系，除了使用 display:none 隱藏掉復選框，我們可以讓復選框顯示出來，但是你卻看不到：
[type=checkbox],
[type=radio] {
position: absolute;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
}
這里的 CSS 技巧：
- 使用 position:absolute 將復選框浮動起來
- 設置寬度和高度為 1px，使其在頁面顯示為一個像素的小黑點
- 通過 clip:rect(0 0 0 0) 設置裁剪矩形為空，最終讓你看不到這個復選框，但是這個復選框還是存在的
注：clip 屬性僅可用來裁剪絕對定位元素，對於 position:static 或者 position:relative 的元素無效。
這還不算結束，我們還需要復選框獲取焦點時，能有樣式的改變，便於用戶察覺：
$('[type=checkbox],[type=radio]').focus(function(){
$(this).parent('label').addClass('focusit');
}).blur(function() {
$(this).parent('label').removeClass('focusit');
});
以及相應的 CSS 樣式：
label.focusit {
color: green;
}
最終的頁面效果：
Step10：完整的JavaScript代碼
最后，來看下完整的 JavaScript 代碼：
<script>
$(function() {
$('[type=checkbox],[type=radio]').each(function() {
var checkEl = $(this);
$('<i>', {
'class': 'fa ' + checkEl.attr('type')
}).insertAfter(checkEl);
if(checkEl.is(':checked')) {
checkEl.parent('label').addClass('checked');
}
}).change(function() {
var checkEl = $(this);
var checked = checkEl.is(':checked');
var labelEl = checkEl.parent('label');
if(checkEl.is('[type=checkbox]')) {
if(checked) {
labelEl.addClass('checked');
} else {
labelEl.removeClass('checked');
}
} else {
var radioName = checkEl.attr('name');
var radioEls = $('[type=radio][name='+ radioName +']');
radioEls.parent('label').removeClass('checked');
labelEl.addClass('checked');
}
}).focus(function(){
$(this).parent('label').addClass('focusit');
}).blur(function() {
$(this).parent('label').removeClass('focusit');
});
});
</script>
源碼和視頻下載
三石出品，必屬精品！
如果本文對你有所幫助，請點擊 [推薦] 按鈕來鼓勵作者，你的支持是我們前進的動力！