全选 单选和反选的实现

大家早上好，新的一天又开始咯，继续学习啊，其实最近我发现了一张图特别好玩，如下：

哈哈，就是这张，但是我想说的是，革命尚未成功啊，还得继续修炼啊，好了，闲篇扯到这里，我们今天先来看一下，风靡各大电商网站用来赚钱的小对勾啊—–看看，全选单选和反选的使用。
我们先来写一个代码的结构，如下：

<ul>
        <li>
            <input type="checkbox" class="selectAll" />
            <div id="allInner">全选</div>
            <div id="reverse">反选</div>
        </li>
        <li>
            <input type="checkbox" class="check" />
            <div>选项一</div>
        </li>
        <li>
            <input type="checkbox" class="check"/>
            <div>选项二</div>
        </li>
        <li>
            <input type="checkbox" class="check"/>
            <div>选项三</div>
        </li>
        <li>
            <input type="checkbox" class="check"/>
            <div>选项四</div>
        </li>
        <li>
            <input type="checkbox" class="check"/>
            <div>选项五</div>
        </li>
    </ul>

效果图如下：

很简单明了，不要嫌弃它太丑哦~

好了，我们现在来分析一下，这三个功能要怎么实现。我们前面的博文已经介绍过jQuery的用法了哦，所以在这里为了方便，我们用一下jq来实现这个功能。
温馨提示：大家在使用的时候，别忘了引入jq文件哟。

全选的实现：

实现全选的状态很简单，我们肯定都用过这个，就是点击全选，单选全部被选中，再次点击，全选全部被取消。
好了，我们知道全选怎么实现了，现在我们就来看一下代码应该怎么写呢，闲话不多说，简单粗暴上代码~

$(".selectAll").on("click",function(){
    if(this.checked){
        $(".check").prop("checked",true);
    }else{
        $(".check").prop("checked",false);
    }
})

这样我们就实现了全选应有的功能，效果图如下：

---

单选的实现

嗯~全选实现了，现在我们一起来看看单选是怎么实现的。
实现单选，点击任意一个单选，选中单选，带你第二次消失，这个效果复选框已经帮我们实现，所以不用写
然后就是，当我们选中全部的单选的时候，全选被选中。
当然了，如果全选被选中，单选也必须是全部选中的状态，单选中有一个没被选中的，全选就不被选中。

下面我们一起来看看单选的代码段的实现：

var checkS = $(".check");
for(var i = 0;i<checkS.length;i++){
    /*那这里可能有小伙伴会说了，萍子你不是说好了要用jq的方法，怎么又写了js的方法呢。
    原因是，当对一个jq数组对象取下标以后，取到的这个就变成了一个原生对象，所以这里我又用了js原生方法。
    当然了，如果还是想用jq方法的话也是可以的，再在元素外面套一个$()就OK了。*/
    checkS[i].onclick = function(){
        var isSelectAll = true;//假设全选是选中状态的自定义变量
        for(var i = 0;i<checkS.length;i++){
            if(checkS[i].checked == false){
                isSelectAll = false;
                break;
            }
        }
        if(isSelectAll){
            $(".selectAll").prop("checked",true);
            $("#allInner").html("全不选")；
        }
        if(this.checked == false){
            $(".selectAll").prop("checked",false);
            $("#allInner").html("全选")；
        }
    }
}

好了，写到这里，我们的单选就实现好了，来看看效果吧，，效果图如下，哈哈哈~

---

反选的实现

反选的意思，顾名思义就是，选中的变为不被选中，不被选中的变为选中；全选的变全不选，全不选的变全选；或者是，某几个单选被选中的变为不被选中，其他几个不被选中的变为选中。

我滴妈啊，我是一个被代码耽误的耍嘴皮的巧嘴~不，巧手啊，好吧好吧，不嘚瑟了，哈哈哈。反选的实现效果我已经很神奇的介绍过了，现在惯例，我们还是来看看代码的实现，上代码~

$("#reverse").on("click",function(){
    /*按理说，反选被点击，全选应该为选中状态，
    但是由于再次点击反选的时候，全选还是会是选中的状态，所以在这里我们设为不选中。
    还有一个原因是，反选的时候，如果单选全被选中了，全选也是选中的，所以不会出现错乱。*/
    $(".selectAll").prop("checked",false);
    $("#allInner").html("全选")；
    for(var i = 0;i<checkS.length;i++){
        checkS[i].checked = !checkS[i].checked;
    }
    var isSeleceAll = true;
    for(var i = 0;i<checkS.length;i++){
        if(checkS[i].checked == false){
            isSelectAll = false;
            break;
        }
    }
    if(isSelectAll){
        $(".selectAll").prop("checked",true);
        $("#allInnner").html("全不选")；
    }
})

好了，反选的代码也写完了，来看看效果：

额，以上代码，为萍子全手打，如果有错误的话，希望指正啊，么么哒~