http://www.bootcss.com/p/icheck/
1.先看下网上下载的demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" /> <meta name="description" content="JQUERY自定义复选框checkbox和单选框radio样式插件iCheck.js下载" /> <title>JQUERY自定义复选框checkbox和单选框radio样式插件iCheck.js下载 </title> <link href="css/square/blue.css" rel="stylesheet"> <!---样式---> <script src="js/jquery.js"></script> <!---Jquery---> <script src="js/icheck.min.js"></script> <!----插件----> </head> <body style="text-align:center;"> <!-- 代码 开始 --> <div style="margin:30px;">type=checkbox, 多选</div> <input type="checkbox"> <input type="checkbox" checked> <div style="margin:30px;">type=radio， 单选</div> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked> <div style="margin:30px;">禁止选取</div> <input type="radio" name="iCheck" id="example"> <script>
//初始化
$(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系,用于type=checkbox radioClass: 'iradio_square-blue', // 用于type=radio increaseArea: '20%' // 增大可以点击的区域 }); }); // 选中事件绑定 $('input').on('ifChecked', function(event){ alert('被选中了'); }); // 取消选中事件绑定 $('input').on('ifUnchecked', function(event){ alert('被取消了'); }); // 禁止选取 $('#example').iCheck('disable'); </script> <!-- 代码 结束 --> </body> </html>
//初始化
$(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系,用于type=checkbox radioClass: 'iradio_square-blue', // 用于type=radio increaseArea: '20%' // 增大可以点击的区域 }); });
使用on()方法绑定事件：
$('input').on('ifChecked', function(event){ alert(event.type + ' callback'); });
| 事件名称 | 使用时机 |
|---|---|
| ifClicked | 用户点击了自定义的输入框或与其相关联的label |
| ifChanged | 输入框的 checked 或 disabled 状态改变了 |
| ifChecked | 输入框的状态变为 checked |
| ifUnchecked | checked 状态被移除 |
| ifDisabled | 输入框状态变为 disabled |
| ifEnabled | disabled 状态被移除 |
| ifCreated | 输入框被应用了iCheck样式 |
| ifDestroyed | iCheck样式被移除 |