Pretty checkboxes with jQuery 上下為使用前後

在設計表單的時候，偶爾會覺得瀏覽器預設的元件看起來不夠好看也不夠顯眼，可能會讓使用者填寫表單的時候感覺這個網站很一般，跟其他的沒什麼不一樣。Pretty checkboxes with jQuery 這一個主要是設計了一個美觀又大方的表單 Checkbox 元素，讓使用者不只是感覺到不一樣，而且也具備了實用性能夠填入的敘述文字也更多了。

使用方法：
第一步 載入 Pretty checkboxes with jQuery 需要用到的 JavaScrip 檔
<!--使用 Google AJAX API 取得 jQuery 框架 1.8.2 的 min 版本-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

第二步 使用 HTML 輸入表單元素
<form>
<fieldset>
<legend>Choose some stuff...</legend>
<ul class="checklist">
<li>
<input id="choice_a" name="jqdemo" type="checkbox" value="value1">
<label for="choice_a">Here's the 1st selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_b" name="jqdemo" type="checkbox" value="value2">
<label for="choice_b">Here's the 2nd selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_c" checked="checked" name="jqdemo" type="checkbox" value="value3">
<label for="choice_c">Here's the 3rd selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_d" name="jqdemo" type="checkbox" value="value4">
<label for="choice_d">Here's the 4th selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
</ul>
<button title="Submit the form">Send it!</button>
</fieldset>
</form>

第三步 為表單元素 Checkbox 設計 CSS 樣式內容
legend {
font-size: 17px;
}
fieldset {
border: 0;
}
.checklist {
list-style: none;
margin: 0;
padding: 0;
}
.checklist li {
float: left;
margin-right: 10px;
background: url(i/checkboxbg.gif) no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}
.checklist li.selected {
background-position: -105px 0;
}
.checklist li.selected .checkbox-select {
display: none;
}
.checkbox-select {
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url(i/select.gif) no-repeat 0 0;
text-indent: -9999px;
}
.checklist li input {
display: none;
}
a.checkbox-deselect {
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;
}
.checklist li.selected a.checkbox-deselect {
display: block;
}
.checklist li label {
display: block;
text-align: center;
padding: 8px;
}
.sendit {
display: block;
float: left;
top: 118px;
left: 10px;
width: 115px;
height: 34px;
border: 0;
cursor: pointer;
background: url(i/sendit.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 20px 0;
}

第四步 使用 JavaScript 讓表單元素改變樣式並且保留原始功能
$(function() {
    $(".checklist input:checked").parent().addClass("selected");
    $(".checklist .checkbox-select").click(
        function(event) {
            event.preventDefault();
            $(this).parent().addClass("selected");
            $(this).parent().find(":checkbox").attr("checked","checked");
        }
    );
    $(".checklist .checkbox-deselect").click(
        function(event) {
            event.preventDefault();
            $(this).parent().removeClass("selected");
            $(this).parent().find(":checkbox").removeAttr("checked");
        }
    );
});

作者網站：http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
檔案大小：4.24 KB (包含範例)
檔案下載：https://github.com/dub/Pretty-Checkboxes
檔案備份：下載