全选全不选实现

参考廖雪峰JavaScript教程jQuery

index.html

    
    
    



    
    

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

            
 反选
            
 JavaScript
            
 Python
            
 Ruby
            
 Haskell
            
 Scheme
            
Submit
        
    

index.js

'use strict';

$(document).ready(function () {
    var form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        invertSelect = form.find('a.invertSelect');

    // 全选或全不选
    selectAll.click(function (e) {
        if (selectAll.is(":checked")) {
            langs.prop("checked", true);
        } else {
            langs.prop("checked", false);
        }
    });

    // 反选
    invertSelect.click(function (e) {
        langs.each(function (index) {
            $(this).prop("checked", !$(this).is(":checked"));
        });
        selectAll.prop("checked", isAllChecked());
    });

    // 各个选择框
    langs.click(function (e) {
        selectAll.prop("checked", isAllChecked());
    });

    // 判断是否全部选中
    function isAllChecked() {
        return langs.filter(":checked").length == langs.length;
    }
});

补充说明：

1. 判断多选框是否选中的方法：
   var radio = $('#test-radio');
   radio.attr('checked'); // 'checked'
   radio.prop('checked'); // true
   radio.is(':checked'); // true
   类似的属性还有selected

2. each接受的函数的第一个参数是index，函数中this是dom对象，不是jquery对象

3. 利用过滤器判断是否全选