必优博客

站在整体与部分的角度，让我们来思考一下部分对于整体的重要性，制作个性化的复选框，这只是表单[大一点就是网页]元素中的一部分，如果要精细到这个程度，那部分的效应将会给整体带来很大的影响，当然，我说的这些基本跑题，因为大家专注的不是这些，但你要知道，单纯的复选框效果如果没有整体风页的配合，那却很难发挥它的极致，使用jQuery UI制作个性化的复选框，效果图如下：

点我下载jQuery UI checkbox插件实例源程序[下载]

使用说明
需要使用jQuery库文件，jQuery UI库文件和jQuery UI checkbox插件
同时需要定义复选框显示的CSS样式
必优推荐级别：★★★
使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.min.js"></script>
2. <script type="text/javascript" src="jquery-ui.min.js"></script>
3. <script type="text/javascript" src="ui.checkbox.js"></script>

二，HTML部分

1. <form id="ui">
2. <label for="test1">Test 1</label>
3. <input type="checkbox" name="test1" value="test" id="ui-test1"/>
4. <label for="test2">Test 2</label>
5. <input type="checkbox" name="test2" value="test" id="ui-test2" checked="checked"/>
6. <label for="test3">Test 3</label>
7. <input type="checkbox" name="test3" value="test" id="ui-test3"/>
8. <label for="test3">Test 4</label>
9. <input type="checkbox" name="test4" value="test" id="ui-test4"/>
10. <label for="test3">Test 5</label>
11. <input type="checkbox" name="test5" value="test" id="ui-test5"/><br />
12. <label for="radio1">Radio 1</label>
13. </form>

三，Javascript部分

1. <script type="text/javascript">
2. $("form#ui input").filter(":checkbox,:radio").checkbox();
3. $("#ui-test4").parent(".ui-checkbox").addClass("ui-state-highlight");
4. $("#ui-test5").parent(".ui-checkbox").addClass("ui-state-error");
5. </script>

如上实例，使用jQuery UI checkbox插件实现个性化的复选框非常简单，可直接定义在需要实现的复选框元素上。

点我下载jQuery UI checkbox插件实例源代码