94JS类库：jQuery方法扩展、全选、反选

一、jQuery方法扩展
在jQuery上扩展方法，通过点击实现选项卡的切换。本实例在jQuery的类上扩展，即$.extend({chooseCard:函数})，通过$.chooseCard('#box')调用；有别于$.fn.extend({chooseCard:函数})扩展，通过$().chooseCard('#box')调用。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:312px;
            border:2px red solid;
            margin: 0 auto;
        }
        ul{
            overflow: hidden;
        }
        li{
            list-style: none;
            background:red;
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 2px solid orange;
        }
        li.on{
            background: green;
        }
        .box div{
            background:green;
            display: none;
            width: 312px;
            height: 200px;
            font-size: 30px;
            border-top: none;
        }
        .box div.on{
            display: block;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <ul>
        <li class="">中国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
    <div class="on">中国是老大</div>
    <div>日本是老二</div>
    <div>韩国是老三</div>
</div>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
    (function($){
        $.extend({
            chooseCard:function(idStr){
                var $box=$(idStr);
                var $li=$box.find('li');
                console.log($li);
                var $aDiv=$box.find('div');
                $li.click(function(){
                    $(this).css({"height":"32px","border-bottom":"none"}).siblings('li')
                           .css({"height":"30px","border-bottom":"2px solid orange"});
                    $(this).addClass('on').siblings('li').removeClass('on');
                    $aDiv.eq($(this).index()).addClass('on').siblings('div').removeClass('on');
                })
            }
        })
    })(jQuery);
</script>
<script>
    $(function(){
        $.chooseCard('#box');
    })
</script>
</body>
</html>
```
二、复选框全选、反选(<input type='checkbox'/>)
(1)获取复选框状态：$("#allSelect").prop("checked")
(2)改变复选框状态：$("#allSelect").prop("checked",false)
(3)翻转复选框状态：item.checked = !item.checked;
(4)判断复选框是否被选中：if ($(this).is(':checked'))
(5)找到所有被选中的复选框：myDiv.find("input:checked");
(6)获取所有复选框：$("#single input:checkbox")或$("#single input[type=checkbox]");
(7)获取所有被选中的复选框：$("#single input:checkbox:checked")或$("#single input[type=checkbox]:checked");

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<span>全选</span><input type="checkbox" id="allSelect"><br>
<span>反选</span><input type="checkbox" id="reverseSelect">
<div id="single">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>
</body>
</html>
<script>
    $("#allSelect").click(function () {
        $("#single").children().each(function (index, item) {
            item.checked = $("#allSelect").prop("checked");
        });
        $("#reverseSelect").prop("checked",false);
    });
    $("#reverseSelect").click(function () {
        $("#single").children().each(function (index, item) {
            item.checked = !item.checked;
        });
        $("#reverseSelect").prop("checked",true);
        singleInput();
    });
    $("#single").children().click(function (index, item) {
        $("#reverseSelect").prop("checked",false);
        singleInput();
    });
    function singleInput() {
        if($("#single input:checkbox:checked").length==$("#single input:checkbox").length){
            $("#allSelect").prop("checked",true);
        }else{
            $("#allSelect").prop("checked",false);
        }
    }
</script>
```
94JS类库：jQuery方法扩展、全选、反选

相关文章
