tnblog
首页

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

48人阅读 2019/3/23 22:54 评论:0 收藏
分类: .net


    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()的话,你会发现,它就像烟花样,只能实现一次,下次就废了。

    

    

评价

{{item.title}}

{{item.content}}
做个有趣的人!
博主搜索
文章类别
最新文章
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}