Discuss / JavaScript / 虽然满足题目要求了,但总感觉逻辑哪还有点问题...

虽然满足题目要求了,但总感觉逻辑哪还有点问题...

Topic source

折木y丶

#1 Created at ... [Delete] [Delete and Lock User]

题目:

绑定合适的事件处理函数,实现以下逻辑:

  • 当用户勾上“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
  • 当用户去掉“全不选”时,自动不选中所有语言;
  • 当用户点击“反选”时,自动把所有语言状态反转(选中的变为未选,未选的变为选中);
  • 当用户把所有语言都手动勾上时,“全选”被自动勾上,并变为“全不选”;
  • 当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。
function offSelectAll(){  //'全选'消失,'全不选'显示
    deselectAllLabel.show();
    selectAllLabel.hide();
}

function showSelectAll(){  //'全选'显示,'全不选'消失
    deselectAllLabel.hide();
    selectAllLabel.show();
}

function select_All(){  //全选
    langs.map(function(){
        $(this).prop('checked','checked');
    });
    offSelectAll();
}

function deselect_All(){  //全不选
    langs.map(function(){
        $(this).removeAttr('checked');
    });
    showSelectAll();
}

function invert_Select(){  //反选
    let selected_num = 0;
    langs.map(function(){
        if($(this).is(':checked')){  //若已被勾选
            $(this).removeAttr('checked');
            selected_num += 1;
        }else{
            $(this).prop('checked','checked');
        }
    });
    if(selected_num === 0){  //若点击反选之前没一个被选中
        selectAll.prop('checked','checked');
        offSelectAll();
    }
    if(selected_num === langs.length){  //若点击反选之前所有都被选中
        selectAll.removeAttr('checked');
        showSelectAll();
    }
}

function selectSingle(){
    let selected_num = 0;
    langs.map(function(){
        if($(this).is(':checked')){  //若已被勾选
            selected_num += 1;
        }
    });
    if(selected_num < langs.length){  //当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。
        selectAll.removeAttr('checked');
        showSelectAll();
    }
    if(selected_num === langs.length){  //若点击当前 checkbox 之后所有都被选中,“全选”被自动勾上,并变为“全不选”;
        selectAll.prop('checked','checked');
        offSelectAll();
    }
}


function clickCheckbox(){ 
    if(selectAll.is(':checked')){    //若点击后被选中,表示之前未被选中,看作点击全选
        select_All();
    }else{    //否则,之前已被选中,此次点击表示全不选
        deselect_All();
    }
}

selectAll.click(clickCheckbox);  
invertSelect.click(invert_Select);
langs.map(function(){
    $(this).click(selectSingle);
});

  • 1

Reply