$(function(){

    var deselectAllSpan = $('label.selectAll span.deselectAll');//label span deselectAll

    deselectAllSpan.hide();

})

$(function(){

    var langs = $('input[name=lang]'),

        select = $('label.selectAll :checkbox'),

        selectAll = $('span.selectAll'),

        deselectAll = $('span.deselectAll'),

        invertSelect = $('a.invertSelect');

    select.change(function(){//绑定全选事件

        if (select.prop('checked')){//如果选择全选

            langs.prop('checked',true);

            selectAll.hide();

            deselectAll.show();

        }

        else{ //如果选择全不选

            langs.prop('checked',false);

            selectAll.show();

            deselectAll.hide();

        }

    })

    langs.change(function(){ //判断五个选项状态 使用change事件监听

        var judge=false;

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

            if ($(langs[i]).prop('checked')){judge=true;}

            else {judge=false;break;}

        }

        if(judge===true){//如果全部选择 也勾选上全选选项

            select.prop('checked',true);

            select.change();

        }

        else{//如果有一个没有选择 就去掉全选选项 并且更改呈现内容

            select.prop('checked',false);

            selectAll.show();

            deselectAll.hide();

        }

    })

    invertSelect.click(function(){

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

            if ($(langs[i]).prop('checked')){$(langs[i]).prop('checked',false);}

            else {$(langs[i]).prop('checked',true);}

        }

        langs.change();

    });