题目:
绑定合适的事件处理函数,实现以下逻辑:
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); });
Sign in to make a reply
折木y丶
题目:
绑定合适的事件处理函数,实现以下逻辑: