jquery仿hotmail全选

function checkAll() {
    $.fn.check = function(mode) {
        var t = $(this);
        mode = mode || 'on';
        t.click(function(){
            var isAllCheck = $(this).prop('checked');
            var allInput = $(this).parent().parent().siblings('.tabsOpt').find('input');
 
            return allInput.each(function(){
                switch(mode) {
                    case 'on':
                        this.checked = true;
                        break;
                    case 'off':
                        this.checked = false;
                        break;
                    case 'toggle':
                        if(isAllCheck) {
                            if(this.checked === false) {
                                this.checked = true;
                            }
                        }else {
                            if(this.checked === true)
                            this.checked = !this.checked;
                        }
                        break;
                }
            });
        });
    };
    $('.selAll').check('toggle');
}

<div class="tabsCons tab1-con">
                                                            <ul class="tabsTitle">
                                                                <!--checkbox-->
                                                                <li class="cb">
                                                                    <input class="selAll" type="checkbox" name="selAll">
                                                                </li>
                                                                <!--label name-->
                                                                <li class="ln">标签名称</li>
                                                                <!--range filter-->
                                                                <li class="rf">范围筛选</li>
                                                            </ul>
                                                            <div class="tabsOpt">
                                                                <!--性别-->
                                                                <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">性别</li>
                                                                    <li class="rf">
                                                                        <select name="sex">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">男</option>
                                                                            <option value="2">女</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--年龄-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">年龄</li>
                                                                    <li class="rf">
                                                                        <select name="age">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">男</option>
                                                                            <option value="2">女</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--婚姻与否-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">婚姻与否</li>
                                                                    <li class="rf">
                                                                        <select name="Marriage">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                 <!--生育与否-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">生育与否</li>
                                                                    <li class="rf">
                                                                        <select name="birth">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--年收入水平-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">年收入水平</li>
                                                                    <li class="rf">
                                                                        <select name="income">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--地区标签-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">地区标签</li>
                                                                    <li class="rf">
                                                                        <select name="area">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--兴趣爱好-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">兴趣爱好</li>
                                                                    <li class="rf">
                                                                        <select name="hobby">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>
                                                                <!--城市级别-->
                                                                 <ul class="tabsOptInner">
                                                                    <li class="cb"><input type="checkbox" name="s性别ex"></li>
                                                                    <li class="ln">城市级别</li>
                                                                    <li class="rf">
                                                                        <select name="cityLevel">
                                                                            <option value="0">不限</option>
                                                                            <option value="1">是</option>
                                                                            <option value="2">否</option>
                                                                        </select>
                                                                    </li>
                                                                </ul>

                                                            </div>

 

转载于:https://my.oschina.net/joldy/blog/820059