全选,全不选,反选,全选/全不选

几种常见选择写法,

    
你好爱好:全选/全不选

//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元素对象

你可能感兴趣的:(全选,全不选,反选,全选/全不选)