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

iCheck .js各种各样的插件 fuck Javascript的更多相关文章

  1. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  2. iCheck.js

    一.iCheck:http://www.bootcss.com/p/icheck/ 1.选择一个颜色主题,网上有,有了一个肤色主题,然后就是把这个肤色主题的css文件复制到iCheck文件夹里面 2. ...

  3. Hello.js – Web 服务授权的 JavaScript SDK

    Hello.js 是一个客户端的 Javascript SDK,用于实现 OAuth2 认证(或者基于 OAuth 代理实现的 OAuth1)的 Web 服务和查询 REST API. HelloJS ...

  4. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  5. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  6. iCheck表单美化插件使用方法详解（含参数、事件等）

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

  7. node.js 使用 UglifyJS2 高效率压缩 javascript 文件

    UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...

  8. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  9. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. ECONOMETRICS CHAPTER1

    ♣回归一词的来历 回归到中等,子辈较父辈的身高回归到中等. ♣回归的现代含义 研究一个因变量对解释变量的依赖关系.通过解释变量来估计和预测因变量. ♣回归分析的结果不一定意味着因果关系,必须诉诸理论思 ...

  2. Pacman命令介绍

    用pacman很久了,一直没有深入去研究到底它包含多少神秘的力量,每次都是pacman -Syu就简单的把所有升级更新问题搞定实在是让笔者懒惰了很多.不过也正是因为pacman的简单让笔者爱不释手,同 ...

  3. 2017-2018-2 20165228 实验二《Java面向对象程序设计》实验报告

    2017-2018-2 20165228 实验二<Java面向对象程序设计>实验报告 相关知识点 三种代码 伪代码:注释,与具体编程语言无关 产品代码:由伪代码翻译而来的具体编程语言语法相 ...

  4. Django之模型层-单表操作

    单表操作 添加记录 方式1 # 先实例化models中的对象,按照定义的语句规则传入参数,然后使用对象调用save()保存到数据库 book_obj = Book(id=1,title='python ...

  5. Jaxb如何优雅的处理CData

    前言   Jaxb确实是xml和java对象映射互转的一大利器. 但是在处理CData内容块的时候, 还是有些小坑. 结合网上搜索的资料, 本文提供了一种解决的思路, 看看能否优雅地解决CData产出 ...

  6. ubuntu上安装boost库

    只需一条命令: sudo apt install libboost-dev

  7. 20155219 2016-2017-2 《Java程序设计》第3周学习总结

    20155219 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 数组问题 -Scanner实例,猜数字. package src.week1; import ...

  8. NYOJ 12：喷水装置（二）（贪心，区间覆盖问题）

    12-喷水装置(二) 内存限制:64MB 时间限制:3000ms 特判: No 通过数:28 提交数:109 难度:4 题目描述: 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n ...

  9. ACM-ICPC 2018 沈阳赛区网络预赛-K：Supreme Number

    Supreme Number A prime number (or a prime) is a natural number greater than 11 that cannot be formed ...

  10. java-内部类访问特点-私有成员内部类-静态成员内部类-局部内部类访问局部变量

    1.内部类访问特点: - 内部类可以直接访问外部类的成员,包括私有. - 外部类要访问内部类的成员,必须创建对象. - 外部类名.内部类名 对象名 = 外部类对象.内部类对象: - 例: class ...