思宇上课笔记—全(不)选反选功能的实现

    jQuery课堂实例

    在平时生活中，全(不)选和反选的功能非常实用，今天我们用jQuery来简单实现它。

    1.首先我们来看下需求

    2.看一下HTML代码

    3.实现全选功能，单击全选单选框，所以复选框被选中

    效果如下：

        因为是给所有checkbox添加属性，所以就可以使用属性过滤选择器，简化代码，如图：

    4.实现全不选功能，单击全不选单选框，所有复选框取消选中

    原理同全选一样，只需将元素checked的属性设置为false

    同样可以将代码简化为：

    效果如图：

    5.实现反选的功能，开始被选中的取消选中，未被选中的设置为选中

    代码还可以.is()方法，进行简化：

    用is(":checked")判断元素是否被选中，然后取反，一步完成

    效果如图：

    注意：我们这里用到了prop()方法来设置属性，但有一个attr()方法与它类似，值得注意

    那具体该使用哪种方法？

        1. 对于HTML元素本身就带有的固有属性，在处理时，使用prop()。

        2.对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr()。

        3. 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他使用attr()。

        所以我们在这里设置checked，就应该用prop()，如果使用attr()的话，你会发现，它就像烟花样，只能实现一次，下次就废了。