jQuery全选、全不选、反选的简洁写法【实例】

来源:互联网 发布:bigemap软件 编辑:程序博客网 时间:2024/06/11 22:49

全选方面的功能几乎是每个需要列表展示的网站所必不可少的,当然此功能也有很多种写法,现在介绍一下,比较简洁易懂的写法:

<input type="checkbox" name="gogf[]"/><input type="checkbox" name="gogf[]"/><input type="checkbox" name="gogf[]"/><button id="all_xuan">全选</button> <button id="no_xuan">全不选</button> <button id="fan_xuan">反选</button>

显示效果如图:
全选方面的功能

//jQuery代码如下:$('button#all_xuan').click(function(){    $('[name="gogf[]"]:checkbox').prop('checked',true);})$('button#no_xuan').click(function(){    $('[name="gogf[]"]:checkbox').prop('checked',false);})$('button#fan_xuan').click(function(){    $('[name="gogf[]"]:checkbox').each(function(index,element){        this.checked=!this.checked;    });})

上述代码亲测可用,如何大家有更好的写法,欢迎留言,交流学习!