25 JavaScript插件---使用jQuery iCheck插件实现全选反选功能

jQuery iCheck

表单复选框、单选框控件美化插件，主要作用为：

• 渲染并美化当前页面的复选框或单选框
• 响应复选框或单选框的点击事件

页面引用

CSS 部分

<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">

JS 部分

<!-- iCheck 1.0.1 -->
<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>

激活 iCheck

默认情况下 iCheck 是不生效的，需要使用 JS 代码激活，此过程可以指定 iCheck 的皮肤，案例代码如下：

<input type="checkbox" class="minimal" />

JS 部分

<script>
    $(function x() {
        // 激活 iCheck
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        });

    })
</script>

回调事件

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){
  alert(event.type + ' callback');
});

方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：

• $('input').iCheck('check');：将输入框的状态设置为 checked
• $('input').iCheck('uncheck');：移除 checked 状态
• $('input').iCheck('toggle');：
• $('input').iCheck('disable');：将输入框的状态设置为 disabled
• $('input').iCheck('enable');：移除 disabled 状态
• $('input').iCheck('update');：
• $('input').iCheck('destroy');：移除 iCheck 样式

案例代码

<input type="checkbox" class="minimal iCheck_master" />

 <c:forEach items="${tbUsers}" var="tbUser">
     <tr>
        <th><input type="checkbox" class="minimal" /></th>
        <td>${tbUser.id}</td>
        <td>${tbUser.username}</td>
        <td>${tbUser.phone}</td>
        <td>${tbUser.email}</td>
  </tr>
 </c:forEach>

<script>
    $(function x() {
        // 激活 iCheck
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        });

        $('input[type="checkbox"].minimal.iCheck_master').on('ifClicked',function (e) {
            if(e.target.checked){
                $('input[type="checkbox"].minimal').iCheck('uncheck')
            }
            else{
                $('input[type="checkbox"].minimal').iCheck('check')
            }

        });
    })
</script>

提升：

由于所有的 checkbox都有这一操作，应该把js提取出来，这样以后只要引用了该js ，就有此效果

webapp/static/assets/app/创建app.js

 

/**
 * jQuery iCheck全选反选
 * @constructor
 */
// 函数对象
var App = function () {

    var _masterCheckbox;
    var _checkbox;

    /**
     * 私有方法 初始化 iCheck
     */
    var handlerInit = function () {

        // 激活 iCheck
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        });

        //获取控制端 Checkbox
        _masterCheckbox=$('input[type="checkbox"].minimal.iCheck_master');

        //获取全部 Checkbox
        _checkbox=$('input[type="checkbox"].minimal');
    };

    /*
    * 全选功能
    * */

    var handlerCheckboxAll = function () {
        //实现全选反选
              $('input[type="checkbox"].minimal.iCheck_master').on('ifClicked',function (e) {
            //当前状态已选中，点击应取消
            if(e.target.checked){
                $('input[type="checkbox"].minimal').iCheck('uncheck')
            }
            //当前状态未选中，点击反选
            else{
                $('input[type="checkbox"].minimal').iCheck('check')
            }

        });
    };
    return {
        /**
         * 初始化 iCheck
         */
        init: function () {
            handlerInit();
            handlerCheckboxAll();
        }

    }
}();

$(document).ready(function () {
    App.init();
});

页面引入：

<script src="/static/assets/app/app.js"></script>