您的位置：首页 > Web前端 > JQuery

编写jQuery插件来扩展checkbox

2007-04-28 18:32 701 查看
本文主要实现两个功能,第一使用图片代替html checkbox一成不变的样式并可以使用checkbox的正常功能,其次是前者的基础之上实现checkbox的全选,全不选和反选.同时也捎带介绍了jQuery最基本的插件写法.

jQuery插件的编写可以通过jQuery.fn.extend方法来实现

$('input[@type=checkbox]').checkbox(
{
checked: 'checked.gif',
unchecked: 'unchecked.gif'
});
把它绑定到$(function(){})中

第二步,实现全选,全不选和单选,网上已经有很多这样的例子了,在这里我添加了一行图片替换的代码来模拟选择和取消选择.

// 全选
<html>
2<head>
3 <title>jquery</title>
4 <script language="javascript" src="jquery-latest.js"></script>
5</head>
98
99<body>
100 <div id="test">
101 <p><input type="checkbox" name="box1"/> Option 1</p>
102 <p><input type="checkbox" name="box2"/> Option 2</p>
103 <p><input type="checkbox" name="box3"/> Option 3</p>
104 <p><input type="checkbox" name="box4"/> Option 4</p>
105 <input type="button" name="btn" value="Show state" />
106 <input type="button" name="btn1" value="SelectAll" />
107 <input type="button" name="btn2" value="DisSelectAll" />
108 <input type="button" name="btn3" value="ToggleSelect" />
109 </div>
110</body>
111
112</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航