2018-09-13 点击事件处理函数练习

   

请选择想要学习的编程语言：

   

       

全选全不选 反选

       

JavaScript

       

Python

       

Ruby

       

Haskell

       

Scheme

       

Submit

   

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

当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

当用户去掉“全不选”时，自动不选中所有语言；

当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

'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());

});

//全选按钮逻辑：监听状态改变，是否被选择：若被选择，隐藏全选按钮，显示全不选按钮，并设置checked = “checked”

selectAll.change(function(){

  $(this).is(':checked') ? deselectAllLabel.show() && selectAllLabel.hide() : deselectAllLabel.hide() && selectAllLabel.show();

  langs.prop('checked', $(this).is(':checked'));

});

langs改变，判断是否满足全选

langs.change(function(){

  langs.filter(':checked').length === langs.length ? selectAll.prop('checked', true) && deselectAllLabel.show() && selectAllLabel.hide() : selectAll.prop('checked', false) && deselectAllLabel.hide() && selectAllLabel.show();

});

反选绑定点击事件，非checked改为checked

invertSelect.click(function(){

  langs.each(function(){

.prop( propertyName, value ) value取 true or false 前面加！取相反

    $(this).prop('checked', !$(this).is(':checked'));

  });

  langs.filter(':checked').length === langs.length ? selectAll.prop('checked', true) && deselectAllLabel.show() && selectAllLabel.hide() : selectAll.prop('checked', false) && deselectAllLabel.hide() && selectAllLabel.show();

});