废话不多说,直接上图

对,还是上篇文章的图,这次我们不研究datatables,而是看这个复选框,比平常的复选框漂亮太多

看看我是如何实现的吧

插件叫iCheck

用法也简单

引入js和css

$("input[type=checkbox]").iCheck({
checkboxClass: "icheckbox_flat-green"
});

可以,这是找到了所有的checkbox


那在看看如何全选

//全选
function check_all() {
var $checkboxAll = $("#check-all"),
$checkbox = $("tbody").find("[type='checkbox']"); $checkboxAll.on('ifClicked', function (event) {
if (event.target.checked) {
$checkbox.iCheck("uncheck");
} else {
$checkbox.iCheck("check");
}
});
}

我表头第一个check的id必须是check-all

触发这个checkbox的选中事件,对表格中的checkbox赋值check或者uncheck


好,项目中的就介绍到这,来的官网的东西

iCheck使用方法:
  1. $('input').iCheck('check');   //将输入框的状态设置为checked
  2. $('input').iCheck('uncheck'); //移除 checked 状态
  3. $('input').iCheck('toggle');  //toggle checked state
  4. $('input').iCheck('disable'); //将输入框的状态设置为 disabled
  5. $('input').iCheck('enable');  //移除 disabled 状态
  6. $('input').iCheck('update');  //apply input changes, which were done outside the plugin
  7. $('input').iCheck('destroy'); //移除iCheck样式
调用iCheck时,只需要将修改了默认值的参数列出来即可:

//基础使用方法
$('input').iCheck({
labelHover : false,
cursor : true,
checkboxClass : 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%'
});

下面是参数列表及其默认值:

{
handle: '',
checkboxClass: 'icheckbox',
radioClass: 'iradio',
checkedClass: 'checked',
checkedCheckboxClass: '',
checkedRadioClass: '',
uncheckedClass: '',
uncheckedCheckboxClass: '',
uncheckedRadioClass: '',
disabledClass: 'disabled',
disabledCheckboxClass: '',
disabledRadioClass: '',
enabledClass: '',
enabledCheckboxClass: '',
enabledRadioClass: '',
hoverClass: 'hover',
focusClass: 'focus',
activeClass: 'active',
labelHover: true,
labelHoverClass: 'hover',
increaseArea: '',
cursor: false,
inheritClass: false,
inheritID: false,
insert: ''
}

iCheck皮肤

Black — minimal.css  //黑色

Red — red.css  //红色

Green — green.css  //绿色

Blue — blue.css  //蓝色

Aero — aero.css //win7中的那种玻璃效果

Grey — grey.css  //银灰色

Orange — orange.css  //橙色

Yellow — yellow.css  //黄色

Pink — pink.css  //粉红色

Purple — purple.css  //紫色

iCheck回调事件
iCheck支持所有选择器(selectors),并且只针对复选框checkbox和单选radio按钮起作用
iCheck提供了大量回调事件,都可以用来监听change事件
 
 事件名称  使用时机
 ifClicked  用户点击了自定义的输入框或与其相关联的label
 ifChanged  输入框的 checked 或 disabled 状态改变了
 ifChecked  输入框的状态变为 checked
 ifUnchecked  checked 状态被移除
 ifDisabled  输入框状态变为 disabled
 ifEnabled  disabled 状态被移除
 ifCreated  输入框被应用了iCheck样式
 ifDestroyed  iCheck样式被移除

使用on()方法绑定事件:

$('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
alert(event.type + ' callback');
});

bootstrap iCheck中的radio和checkbox的大小可以调整吗?

.icheckbox_square-blue, .iradio_square-blue {
display: block;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(blue.png) no-repeat;
border: none;
cursor: pointer;
}

全选

//全选获取数值
var checkAll = $('input.all');
var checkboxes = $('input.check');
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});

获取选中值

$(".ajax-delete").click(function(){
var url = $(this).attr('data-url');
var str="";
var ids="";
$("input[name='id']:checkbox").each(function(){
if(true == $(this).is(':checked')){
str+=$(this).val()+",";
}
});
if(str.substr(str.length-1)== ','){
ids = str.substr(0,str.length-1);
}
console.log(ids);
});

期货大赛项目|六,iCheck漂亮的复选框的更多相关文章

  1. easyui复选框树动态加载后台数据,实现自动选中数据库中数据。后台语言是.NET

    最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...

  2. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  3. 使用angularJS设置复选框的回显状态

    思路分析: 在angularJS中,我们可以使用ng-checked="expression()"来设置复选框的状态:当expression()返回true时,该复选框为选择中状态 ...

  4. Android学习使用基本界面组件(下拉框,单选框,复选框,数字转轮,滚动条)

    (一)建立单选框按钮 RadioGroup和RadioButton建立单选框按钮 字符串资源文件: <resources> <string name="app_name&q ...

  5. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  6. AngularJS(六):表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  7. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  8. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  9. Django项目:CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框

    #admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...

随机推荐

  1. Python——正则模块

    1.re模块是用来操作正则表达式 2.正则表达式——用来字符串匹配的 (1)字符组:[字符组]  例如[0123fdsa456*/-] [0-9] 等同于[0123456789] [a-z] 匹配小写 ...

  2. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  3. codeforces451C

    Predict Outcome of the Game CodeForces - 451C There are n games in a football tournament. Three team ...

  4. shutil模块和几种文件上传Demo

    一.shutil模块 1.介绍 shutil模块是对os中文件操作的补充.--移动 复制 打包 压缩 解压 2.基本使用 1. shutil.copyfileobj(文件1, 文件2, 长度) 将文件 ...

  5. [HDU5969] 最大的位或

    题目类型:位运算 传送门:>Here< 题意:给出\(l\)和\(r\),求最大的\(x|y\),其中\(x,y\)在\([l,r]\)范围内 解题思路 首先让我想到了前面那题\(Bits ...

  6. Vue+koa2开发一款全栈小程序(8.图书列表页)

    1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...

  7. shapeit提取或去除指定SNP和样本(shapeit extract or exclude SNP, sample)

    shapeit最大的功能是对双链DNA进行phase和基因型进行impute.除此之外,还能提取SNP和样本,同样的,也能去除SNP和样本.下面简单介绍这两个功能. 一.提取SNP 提取SNP用到“- ...

  8. python中logger模块的应用

    logger模块是python内置的一个模块,主要用于输出运行日志,可以输出日志的等级,日志的保存路径等 具体详见博客https://www.cnblogs.com/qianyuliang/p/723 ...

  9. kafka 基础知识梳理及集群环境部署记录

    一.kafka基础介绍 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特 ...

  10. CMDB资产管理系统开发【day26】:数据正式存入待存区

    1.from表单提交 1.数据提交到哪里呢? 提交到assets/new_assets_approval.html这了 2.Yes, I'm sure提交了什么?          为什么没有下拉框了 ...