復選框和單選框是表單中使用非常頻繁的組件，但在多數瀏覽器上顯示比較死板，
大家都知道，在Web的Form中美化是最頭痛的，尤其是表單中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select這些元素我們單單只使用CSS是無法匹配設計圖的，像背景顏色或者背景圖片，甚至說margin和padding等等在各瀏覽器下都沒法實現一致的效果
本文介紹一個 jQuery 插件，用來美化這些組件。
有圖才有說明力
首先引入 三個文件
jquery-1.8.1.min.js
Checkable.js
Checkable.css
開始頁面寫js腳本
<script>
$().ready(function(){
$('input.myClass').Checkable({ color: 'blue' });
}); </script>
單選框寫入html 文件
<input id="Radio1" type="radio" class="myClass" value="yes" id="answer" name="answer" data-label="大連" data-color="blue"/>
<input id="Radio2" type="radio" class="myClass" value="yes" id="answer" name="answer" data-label="深圳"/>
其中 data-label 為單選框的文本內容 data-color 字的顏色
多選框寫入html
<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-label="大連"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox1" data-label="沈陽" name="answer"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox2" name="answer" data-label="深圳"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox3" name="answer" data-label="上海"/>
這里要注意 文本框類要寫上 class="myClass" 這句話
如果大家有好看單選多選圖片可以發給我哦
下載地址為
http://files.cnblogs.com/qheasyui/min.zip
說明 有些代碼可能來源於互聯網 或者基於互聯網的修改版。