SOURCE

//全选
//var btn1 = document.getElementById('btn1');
//获取四个多选框,checked表示选中状态
var items = document.getElementsByName('items');
// btn1.onclick = function(){
//     for(var i = 0;i < items.length;i++){
//         items[i].checked = true;
//     }
// }
var all = document.getElementById('all');


function myClick(idStr, fun){
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
}
//全选
myClick('btn1',function(){
    all.checked = true;
    for(var i = 0;i < items.length;i++){
        items[i].checked = true;
    }
});
//全不选
myClick('btn2',function(){
    all.checked = false;
    for(var i = 0;i < items.length;i++){
        items[i].checked = false;
    }
});
//反选
myClick('btn3',function(){
    all.checked = true;
    for(var i = 0;i < items.length;i++){
        // if(items[i].checked){
        //     items[i].checked = false;
        // }else{
        //     items[i].checked = true;
        // }
        //取反
        items[i].checked = !items[i].checked;

        if(!items[i].checked){
            all.checked = false;
        }
    }
});
//提交
myClick('btn4',function(){
    for(var i = 0;i < items.length;i++){
        if(items[i].checked){
            alert(items[i].value);
        }
    }
});

myClick('all',function(){
    // if(all.checked){
    //     for(var i = 0;i < items.length;i++){
    //         items[i].checked = true;
    //     }
    // }else{
    //     for(var i = 0;i < items.length;i++){
    //         items[i].checked = false;
    //     }
    // }
    // console.log(all === this);
    for(var i = 0;i < items.length;i++){
        items[i].checked = this.checked;
    }
});

for(var i = 0;i < items.length;i++){
    items[i].onclick = function(){
        //var count = 0;
        all.checked = true;
        for(var j = 0; j < items.length;j++){
            // if(items[j].checked){
            //     count++;
            // }
            // if(count == items.length){
            //     all.checked = true;
            // }else{
            //     all.checked = false;
            // }
            if(!items[j].checked){
                all.checked = false;
            }
    }
        }
}

<form action="post">
    <p>你喜欢的运动是？<input type="checkbox" value="全选/全不选" id="all">全选/全不选</p>
    <input type="checkbox" value="足球" name="items">足球
    <input type="checkbox" value="篮球" name="items">篮球
    <input type="checkbox" value="羽毛球" name="items">羽毛球
    <input type="checkbox" value="乒乓球" name="items">兵乓球
    <div id="btn">
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="全不选">
    <input type="button" id="btn3" value="反选">
    <input type="button" id="btn4" value="提交">
</div>
</form>

#btn{
    margin-top: 10px;
}
input[type=button]{
    margin-right: 10px;
}