作者:赛冷思
个人博客:sailengsi.com
github:github.com/sailengsi
demo演示地址:demo.sailengsi.com/sls-jquery-checked/release
欢迎您查看这款全选全不选插件文档,如有发现不对之处或有什么建议,可到 github.com/sailengsi/sls-jquery-checked/issues 提出。
此插件基于jquery,使用本文档中的实例代码前,请务必确保你已经引入jquery。
git clone git@github.com:sailengsi/sls-jquery-checked.git
此项目是采用fis编写,fis文档:fis.baidu.com
目录结构如下:
- sls-jquery-checked 项目目录
- dev 此目录是fis开发源码,不可在浏览器上直接运行
首先,进入dev目录
- npm install
- npm run build 这一步会在项目根目录中创建release目录,由dev目录编译而成
- npm start
npm start 之后浏览器会自动打开,启动这个项目,此时浏览器访问的是release目录。
<div class="well bg-info checked-container">
<div class="btn btn-default btn-checks">全选/全不选</div>
<div class="btn btn-default btn-reverse">反选</div>
<table class=''>
<thead>
<tr>
<th><input class='checks' type="checkbox"></th>
<th>value</th><th>id</th><th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class='check' value='1-1' type="checkbox"></td>
<td>1-1</td><td>1</td><td>sailengsi.com</td>
</tr>
<tr>
<td><input class='check' value='1-2' type="checkbox"></td>
<td>1-2</td><td>1</td><td>sailengsi.com</td>
</tr>
</tbody>
</table>
</div>
$(".checked-container").checked({
allCheckbox:'.checks',
oneCheckbox:'.check',
btnChecks:'.btn-checks',
btnReverse:'.btn-reverse'
});
.checked-container容器可以是多个
checked 方法接收一个参数对象
string 控制全选全不选的checkbox选择器
string 单个的checkbox选择器
string 需要获取当前checkbox信息的按钮选择器
string 控制全选全不选的按钮选择器
string 控制反选的按钮选择器
此回调会在初始化和当操作checkbox时回调;上下文指向当前容器的dom对象
此回调会在点击你传的 btnGetCheck选择器 时回调;上下文指向当前容器的dom对象
上面两个回调均返回一个对象,属性如下:
- index number:当前容器的索引
- checkOk object:当前容器内选中的信息
- index array:选中信息的索引
- value array:选中信息的值
- checkNo object:当前容器内未选中的信息
- index array:未选中信息的索引
- value array:未选中信息的值
- isAllCheckTrue boolean:当前容器内是否全部选中;是->true;否->false
- isAllCheckFalse boolean:当前容器内是否全部没有选中;是->true;否->false
感谢您腾出宝贵的时间来查阅这份文档,谢谢,