全选组件

  • 为任意 <input type="check"> 添加 data-toggle="checkall" 类为其绑定全选插件。
实例
创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作
2015-05-25 10:25:36 交易 Item ZERO TJZT201505200025 liang1126 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item TWO TJZT201505200025 jingdong 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item ONE TJZT201501548025 liang1126 158,026.00 3,252.00 288.00 

<!--
  data-toggle="checkAll" 全局绑定checkAll全选插件
  data-target="#j-checkall-demo1 :checkbox" 目标操作的多选项选择器
-->
<input type="checkbox" data-toggle="checkAll" data-target="#j-checkall-demo1 :checkbox">

反选模式

  • 有时候我们为了方便做一个相反的操作，于是做一个按钮能一键选取相反的项。
  • 为任意 <input type="check"> 添加 data-toggle="checkall" data-reverse="true" 设置反选功能。
实例
创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作
2015-05-25 10:25:36 交易 Item ZERO TJZT201505200025 liang1126 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item TWO TJZT201505200025 jingdong 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item ONE TJZT201501548025 liang1126 158,026.00 3,252.00 288.00 
                    
<input type="checkbox" data-toggle="checkAll" data-reverse="true" data-target="#j-checkall-demo2 :checkbox"> 反选

事件监听

  • 为<input type="check"> 元素添加 checked.bp.checkAll" reversed.bp.checkAll" 监听全选及反选事件。
实例
创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作
2015-05-25 10:25:36 交易 Item ZERO TJZT201505200025 liang1126 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item TWO TJZT201505200025 jingdong 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item ONE TJZT201501548025 liang1126 158,026.00 3,252.00 288.00 

// checked.bp.checkAll 已全选触发事件
$('#j-event-1').on('checked.bp.checkAll', function(){
  alert($(this).prop('checked') ? '全选' : '取消全选')
})
                            

// 已反选触发事件
$('#j-event-2').on('reversed.bp.checkAll', function(){
  alert('反选')
})

jQuery 插件参数配置

  • 我们使用$(element).checkAll(options)来绑定一个全选功能。
  • 通过增加data-target="#id"或data-reverse="true"进行配置
实例
创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作
2015-05-25 10:25:36 交易 Item ZERO TJZT201505200025 liang1126 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item TWO TJZT201505200025 jingdong 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item ONE TJZT201501548025 liang1126 158,026.00 3,252.00 288.00 
 
//---------
// 参数配置
$('#j-event-3').checkAll();
$('#j-event-4').checkAll();

//------
// button触发
var defaultChecked = false;
$('#j-trigger-btn').on('click', function() {
  defaultChecked = !defaultChecked;
  $('#j-event-3').checkAll('activate', defaultChecked)
})
// 触发反选
$('#j-trigger-btn-2').on('click', function() {
  $('#j-event-4').checkAll('reverse')
})