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样式被移除 |