jQuery implements the function of selecting all, unselecting and inverting the form

This article mainly introduces the use of jQuery to realize the functions of selecting all, not selecting all and inverting the form.

For the following form:

<!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>

Bind the appropriate event handler to implement the following logic:

When the user ticks "Select All", all languages ​​will be automatically selected, and "Select All" will be changed to "Select All";

When the user removes "Unselect All", all languages ​​are automatically unselected;

When the user clicks "Reverse Selection", all language states are automatically reversed (selected becomes unselected, and unselected becomes selected);

When the user manually ticks all languages, "Select All" is automatically checked and becomes "Unselect All";

When the user manually unchecks at least one language, "Uncheck All" is automatically unchecked and becomes "Select All".

'use strict';

var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});

//以下是重点：
selectAllLabel.click(function(){//当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
    langs.prop('checked',true);
    selectAllLabel.hide();
    deselectAllLabel.show();
});

deselectAllLabel.click(function(){//当用户去掉“全不选”时，自动不选中所有语言；
    langs.prop('checked',false);
    deselectAllLabel.hide();
    selectAllLabel.show();
});

invertSelect.click(function(){//当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
    langs.map(function(){
       $(this).prop('checked',!$(this).prop('checked'));
    });
});

langs.map(function(){
   $(this).change(function(){//当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
        if($('[name=lang]:checked').length==5){
            selectAll.prop('checked',true);
            selectAllLabel.hide();
            deselectAllLabel.show();
        }else{//当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
            selectAll.prop('checked',false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    });
}); 

Welfare Supplement: The following is the solution of a great god, for reference only.

function updateLabel() {
  let allChecked = langs.filter(':checked').length === langs.length

  selectAll.prop('checked', allChecked)
  if (allChecked) {
    selectAllLabel.hide()
    deselectAllLabel.show() 
  } else {
    selectAllLabel.show()
    deselectAllLabel.hide() 
  }
}

selectAll.change(function(e) {
  langs.prop('checked', $(this).is(':checked'))
  updateLabel()
})

invertSelect.click(function(e) {
  langs.click()
})

langs.change(() => updateLabel())