热门标签: 转载 JavaScript mysql 学习 php
主页> 前端 >

四五行代码实现全选按钮功能

发布时间:2018-05-11 编辑:三石兄 标签: Jquery前端 热度:1933

通过简短的几行Jq代码实现点击按钮全选和取消全选的功能

    今天在写一个全选按钮功能的时候,用的jquery来编写的,开始自己写了一大堆的判断来循环判断所有按钮,后来查到jqeruy 有一个each循环接口,each这个方法很好用,通过each循环很轻松的就能实现点击全选按钮的效果;

    htm代码就不记录了,在这里把jq代码记录下来,下次便可以直接使用;

$("#boss").click(function(){
    if(this.checked){
        $("input[name='ids']").each(function () {
            $(this).prop("checked","checked");
        })
    }else{
        $("input[name='ids']").each(function () {
            $(this).prop("checked",false);
        })
    }
});

Q:这里有个坑,就是设置按钮的checked属性的时候,如果用attr的话,前两次点击按钮实现全选效果都是正常的

        但是,第三次点击按钮后,按钮的选中效果就会有异常,checked属性有变化,但是样式没有变化,会少一个::after,

        为什么会造成这样的情况,我就不知道了,但是我知道用 prop 不会出现这种情况!

Copyright © 2017-2020 网络技术文章 & 版权所有

蜀ICP备17023832号

195721