全选，全不选，反选，全选/全不选

几种常见选择写法，

    <form>
        你好爱好：<input type="checkbox" id="checkedAll">全选/全不选<br>
        <label ><input type="checkbox" name="check" value="唱歌">唱歌</label>
        <label ><input type="checkbox" name="check" value="跳舞">唱歌</label>
        <label ><input type="checkbox" name="check" value="吃饭">唱歌</label>
        <label ><input type="checkbox" name="check" value="烫头">唱歌</label>
        <br>
        <input type="button" name="all" id="checkboxAll" value="全 选">
        <input type="button" name="no" id="checkedNo" value="全不选">
        <input type="button" name="reverse" id="checkedRev" value="反 选">
        <input type="button" id="submit" value="提 交">
    </form>

//js
    var form = document.getElementsByTagName("form")[0];
    var inp = form.check;
    var cAll = document.getElementById("checkedAll");
    var all = document.getElementById("checkboxAll");
    var no = document.getElementById("checkedNo");
    var reverse = document.getElementById("checkedRev");

    var i = 0;
    //全选/反选
    cAll.onclick = function() {
        console.log(inp.length)
        if (this.checked) {

            for (i = 0; i < inp.length; i++) {

                inp[i].checked = true;
            }
        }else {

            for (i = 0; i < inp.length; i++) {

                inp[i].checked = false;
            }
        }
    };

    //全选
    all.onclick = function() {

        for (i = 0; i < inp.length; i++) {

            inp[i].checked = true;
        }
    }
    //全不选
    no.onclick = function() {

        for(i = 0; i < inp.length; i++) {

            inp[i].checked = false;
        }
    }

    //反选
    reverse.onclick = function() {

        for (i = 0; i < inp.length; i++) {

            // inp[i].checked = !inp[i].checked;//方式一
            if (inp[i].checked) {

                inp[i].checked = false;
            }else {

                inp[i].checked = true;
            }
        }
    };
    //提交

    submit.onclick = function() {

        var str = "你的爱好："
        for (i = 0; i < inp.length; i++) {

            if (inp[i].checked) {

                str += inp[i].value + "||";
            }
        }

        console.log(str);
    }

需要注意的是 全选/全部选，是要先判断按钮是否被选中，在选择选项；

    
    $(function() {  //prop和attr方法都是设置或者修改被选元素的属性，
        // prop方法用于HTML元素本身就带有的固有属性，
        // attr方法用于HTML元素自己定义的dom属性，

        $("#checkedAll").click(function() {

            if (this.checked) {

                $("[name=check]:checkbox").prop("checked", true);
            }else {

                $("[name=check]:checkbox").prop("checked", false);
            }
        });

        $("#checkboxAll").click(function() {

            $("[name=check]:checkbox").prop("checked", true);
        });

        $("#checkedNo").click(function() {

            $("[name=check]:checkbox").prop("checked", false);
        });

        $("#checkedRev").click(function() {

            $("[name=check]:checkbox").each(function() {
                console.log(this.checked);
                this.checked = !this.checked//this指当前的html对象
            });
        });

        $("#submit").click(function() {

            var str = "你喜欢的是："
            $("[name=check]:checkbox:checked").each(function() {

                str += $(this).val() + "||";//这里$(this)指的是jquery对象
            })

            console.log(str);
        });
    })

attr和prop方法都是设置或修改被选元素的属性：
attr用于HTML元素自己定义的dom属性，
prop用于HTML元素固有的属性，
$(this)和this的区别，$(this)返回的是jquery对象，this返回的当前html元素对象