简介 #

作者：赛冷思

个人博客：sailengsi.com

github：github.com/sailengsi

demo演示地址：demo.sailengsi.com/sls-jquery-checked/release

欢迎您查看这款全选全不选插件文档，如有发现不对之处或有什么建议，可到 github.com/sailengsi/sls-jquery-checked/issues 提出。

使用说明 #

此插件基于jquery，使用本文档中的实例代码前，请务必确保你已经引入jquery。

git安装 #

git clone git@github.com:sailengsi/sls-jquery-checked.git

demo说明 #

此项目是采用fis编写，fis文档：fis.baidu.com

目录结构如下：

- sls-jquery-checked      项目目录
    - dev                 此目录是fis开发源码，不可在浏览器上直接运行

首先，进入dev目录

- npm install
- npm run build 这一步会在项目根目录中创建release目录，由dev目录编译而成
- npm start

npm start 之后浏览器会自动打开，启动这个项目，此时浏览器访问的是release目录。

简单示例 #

html代码 #

<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>

js代码 #

$(".checked-container").checked({
    allCheckbox:'.checks',
    oneCheckbox:'.check',

    btnChecks:'.btn-checks',
    btnReverse:'.btn-reverse'
});
.checked-container容器可以是多个

参数说明 #

checked(options) #

checked 方法接收一个参数对象

allCheckbox属性 #

string   控制全选全不选的checkbox选择器

oneCheckbox属性 #

string   单个的checkbox选择器

btnGetCheck属性 #

string  需要获取当前checkbox信息的按钮选择器

btnChecks属性 #

string   控制全选全不选的按钮选择器

btnReverse属性 #

string   控制反选的按钮选择器

onChange回调 #

此回调会在初始化和当操作checkbox时回调；上下文指向当前容器的dom对象

onGetCheck回调 #

此回调会在点击你传的 btnGetCheck选择器 时回调；上下文指向当前容器的dom对象

回调返回参数(公用) #

上面两个回调均返回一个对象,属性如下：
- index                                 number:当前容器的索引

- checkOk                               object:当前容器内选中的信息
    - index                             array:选中信息的索引
    - value                             array:选中信息的值

- checkNo                               object:当前容器内未选中的信息
    - index                             array:未选中信息的索引
    - value                             array:未选中信息的值

- isAllCheckTrue                        boolean:当前容器内是否全部选中;是->true;否->false
- isAllCheckFalse                       boolean:当前容器内是否全部没有选中;是->true;否->false

致谢 #

感谢您腾出宝贵的时间来查阅这份文档，谢谢，