jQuery javascript checkbox全选/反选

实现全选，全不选，反选功能
1.JavaScript实现
2.jQuery实现

html代码

<div>
    <input type="checkbox" id="selectAll">全选/全不选
    <input type="checkbox" id="Anti-election">反选
</div>
<button type="button" id="selectAllBtn">全选/全不选</button>
<button type="button" id="Anti-electionBtn">反选</button>
<div id="shopCar">
    <input type="checkbox" name="checkBox">香蕉
    <input type="checkbox" name="checkBox">苹果
    <input type="checkbox" name="checkBox">橙子
    <input type="checkbox" name="checkBox">葡萄
</div>

JavaScript代码

window.onload = function () {
        var selectAll = document.getElementById("selectAll");
        var checkBox = document.getElementsByName("checkBox");
        var shopCar = document.getElementById("shopCar");
        var antiElection = document.getElementById("Anti-election");
        //反选
        antiElection.onclick = function () {
            for (var i = 0; i < checkBox.length; i++) {
                checkBox[i].checked = !checkBox[i].checked;
            }
        };

        //全选，全不选
        selectAll.onclick = function () {
            if (selectAll.checked == true) {
                for (var i = 0; i < checkBox.length; i++) {
                    checkBox[i].checked = true;
                }
            }
            else {
                for (var i = 0; i < checkBox.length; i++) {
                    checkBox[i].checked = false;
                }
            }
        };
        //若有一个没选，则全选的checkbox为false
        shopCar.onclick = function () {
            for (var i = 0; i < checkBox.length; i++) {
                var e = checkBox[i];
                if (e.checked) {
                    selectAll.checked = false;
                }
            }
        }

    }

jQuery代码

注意：$(this).attr("checked",true)的使用版本问题

    $(document).ready(function(){
        var select123=true;
        $("#selectAllBtn").click(function(){
            if(select123){
                $("input[name='checkBox']").each(function(){
                    $(this).prop("checked",true);//在jQuery1.7版本之前可以用 $(this).attr("checked",true);之后就不行了
                    select123=false;
                    return;
            })
            }else{
                 $("input[name='checkBox']").each(function(){
                    $(this).prop("checked",false);
                    select123=true;
                    return;
                 })
            }

        })
        $("#Anti-electionBtn").click(function(){
            $("input[name='checkBox']").each(function(){
                $(this).prop("checked",!$(this).prop("checked"));
            })
        })

    })