jQuery插件imageTick实现复选和单选框转化为图片

使用说明
需要使用jQuery 库文件和imageTick 库 文件[在线演示 ][下载 ]

 

使用实例

一，包含文件部分

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="imagetick.js"></script>

 

二，HTML部分

 

<ul>
<li>
<input type="radio" value="php" id="php" name="biuuu" />
<label for="php">PHP</label>
</li>
<li>
 <input type="radio" id="javascript" value="javascript" name="biuuu" checked="checked" />
<label for="javascript">Javascript</label>
</li>
<li>
<input type="radio" id="html" value="html" name="biuuu" />
<label for="html">HTML</label>
</li>
<li>
<input type="radio" id="sql" value="sql" name="biuuu" />
<label for="sql">SQL</label>
</li>
<li>
<input type="radio" id="japanese" value="japanese" name="biuuu" />
<label for="japanese">Japanese</label>
</li>
</ul>

 

三，Javascript部分

 

<script type="text/javascript">
$(document).ready(function(){
$("input[name='biuuu']").imageTick({
tick_image_path: "images/radio.gif",
no_tick_image_path: "images/no_radio.gif",
 image_tick_class: "radios"
});
});
</script>

 

如上实例，把name为biuuu的复选框转化为图片，直接调用jQuery插件imageTick即可，对于单选框的使用方式也一样，使用非常简 单，其中相关参数说明如下：

tick_image_path表示转化的图片
no_tick_image_path表示没有转化的图片
image_tick_class表示显示的CSS效果

 

具体可查看imageTick实例，同时可了解一下imageTick插件的JS库文件，掌握表单元素的替换原理。

点我下载imageTick源程序
http://jquerycodes.googlecode.com/files/imagetick.rar