复选框操作js插件xcheck.js

原创
2017/07/01 10:46
阅读数 98

演示地址:http://www.qietu.com/p/XCheck/ 

源码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="http://www.qietu.com/p/XCheck/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="http://www.qietu.com/p/XCheck/template.js" type="text/javascript"></script>
    <script src="http://www.qietu.com/p/XCheck/XCheck.js" type="text/javascript"></script>
</head>

<body>

    <fieldset>
        <legend style="color:#f00;">场景一(多页情况下保持选择时):</legend>
        <div>
            <input style="width:100%;height:100px;" class="xcheckgroup1 xcheckValue" readonly="readonly" />

            <div>
                <input type="button" class="xcheckgroup1 checkAll" value="全选所有" />
                <input type="button" class="xcheckgroup1 clearCheck" value="清空所有" />
                <input type="button" class="xcheckgroup1 reverseCheckCurrent" value="反选当页" />
                <input type="button" class="xcheckgroup1 clearCheckCurrent" value="清空当页" />
            </div>

            <hr/>

            <div id="group1Page"></div>

            <div class="pageBtn">
                <a href="javascript:void(0);" rel="1">第一页</a>
                <a href="javascript:void(0);" rel="6">第二页</a>
                <a href="javascript:void(0);" rel="11">第三页</a>
                <a href="javascript:void(0);" rel="16">第四页</a>
                <a href="javascript:void(0);" rel="21">第五页</a>
            </div>

        </div>
    </fieldset>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <fieldset>
        <legend style="color:#f00;">场景二(普通选择的情况,也就是只有单页选择):</legend>
        <div>
            <input style="width:100%;height:100px;" class="xcheckgroup2 xcheckValue" readonly="readonly" />

            <div>
                <input type="button" class="xcheckgroup2 reverseCheckCurrent" value="反选当页" />
                <input type="button" class="xcheckgroup2 clearCheckCurrent" value="清空当页" />
            </div>

            <hr/>

            <table style="width:100%;">

                <tr>
                    <td width="5%">
                        序号
                    </td>
                    <td width="95%">
                        <label>
                            <input type="checkbox" class="xcheckgroup2 checkAllCurrent" />全选当页
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="1" />

                    </td>

                </tr>
                <tr>
                    <td>2</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="2" />

                    </td>

                </tr>
                <tr>
                    <td>3</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="3" />

                    </td>

                </tr>
                <tr>
                    <td>4</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="4" />

                    </td>

                </tr>
                <tr>
                    <td>5</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="5" />

                    </td>

                </tr>
            </table>



        </div>
    </fieldset>



    <script type="text/html" id="group1PageTemp">


        <table style="width:100%;">

            <tr>
                <td width="5%">
                    序号
                </td>
                <td width="95%">
                    <label>
                        <input type="checkbox" class="xcheckgroup1 checkAllCurrent" />全选当页
                    </label>
                </td>
            </tr>
            <tr>
                <td>{{start}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+1}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+1}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+2}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+2}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+3}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+3}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+4}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+4}}" />

                </td>

            </tr>
        </table>


    </script>




    <script type="text/javascript">
        $(function(){
            //场景一(多页情况下保持选择时)
            var xcheck1= $.XCheck({
                isKeep:true,
                groupClass:".xcheckgroup1",
                beforeCheckAll:function(){
                    console.log("beforeCheckAll");
                },
                afterCheckAll:function(){
                    console.log("afterCheckAll");
                },
                beforeCheckAllCurrent:function(){
                    console.log("beforeCheckAllCurrent");
                },
                afterCheckAllCurrent:function(){
                    console.log("afterCheckAllCurrent");
                },
                beforeCheckItem:function(){
                    console.log("beforeCheckItem");
                },
                afterCheckItem:function(){
                    var ops=xcheck1.options;
                    console.log('当前的options为:'+JSON.stringify(ops));
                    console.log("afterCheckItem");
                },
                beforeClearCheck:function(){
                    console.log("beforeClearCheck");
                },
                afterClearCheck:function(){
                    console.log("afterClearCheck");
                },
                beforeClearCheckCurrent:function(){
                    console.log("beforeClearCheckCurrent");
                },
                afterClearCheckCurrent:function(){
                    console.log("afterClearCheckCurrent");
                },
                beforeReverseCheckCurrent:function(){
                    console.log("beforeReverseCheckCurrent");
                },
                afterReverseCheckCurrent:function(){
                    console.log("afterReverseCheckCurrent");
                }
            });
            
            var page=function(start){
                start=(parseInt(start) || 1);
                var html=template("group1PageTemp",{start:start});
                $("#group1Page").html(html);
            };
            page();
            
           $("body").on("click",".pageBtn a",function(){
                page($(this).attr("rel"));
                xcheck1.initVal(xcheck1.val());
                return false;
           }); 
            
            //场景二(普通选择的情况,也就是只有单页选择)
            $.XCheck({
                groupClass:".xcheckgroup2"
            });
    
        });
    </script>

</body>
</html>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部