在线咨询
QQ咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>BeyondAdmin中jQuery实现checkbox全…

BeyondAdmin中jQuery实现checkbox全选全不选

发布时间:2019-09-10 浏览:42次

jQuery实现checkbox全选全不选的问题,网站一搜很多解决方法。但是在BeyondAdmin中,jQuery实现checkbox全选全不选就显得很难。为什么呢?原因如下:

BeyondAdmin本身就是一个大框架,本身就有自己的样式,那么,checkbox本身就携带样式,除非你自己重新定义checkbox样式,否则,没有办法。

下面是html样式和js代码,兴弘海科技在制作高端网站定制时候做出备注以及缺陷。

html代码:

 11.png

在这个html代码中,name="itm[]"表示了数组的概念。value="{$order.id}"就是提交后的每个值。

js代码:

$("#checkall").click(function(){

    if($("#checkall").attr("checked")){

        $(".colored-blue").removeAttr("checked");

    }else{

        $(".colored-blue").attr("checked","checked");

    }

});


在这个js代码中,$("#checkall").click的意思是当选择全选的按钮时候,会触发事件。if($("#checkall").attr("checked"))他是判断当全选打钩还是没打勾的时候,如果打勾说明全选了,那么下面的复选框都会选中,如果没打勾,就去除这个checked样式。

缺陷:

经过兴弘海科技测试,代码首次执行和第二次执行是没问题的,但是到了第三次执行的时候,无论是全选打勾还是不打勾,下面的复选框都不会跟着变化。但是如果刷新整个页面,这个全选反选的功能又可以执行。

TAG
42
该内容对我有帮助