码迷,mamicode.com
首页 > 其他好文 > 详细

iCheck的全选和获取value

时间:2017-01-19 19:19:37      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:ajax   checkbox   log   each   tac   插件   height   art   全选   

在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了。

$("#checkall").click(
        function(){
            if(this.checked){
                $("input[name=‘checkname‘]").each(function(){this.checked=true;});
            }else{
                $("input[name=‘checkname‘]").each(function(){this.checked=false;});
            }
        }
    );

这样来写对默认的checkbox框没问题,但是当使用iCheck 插件后将无效。

那么该怎么解决呢?

最后是在stackoverflow 找到的解决方法:

地址是这里: http://stackoverflow.com/questions/17820080/function-select-all-and-icheck

//全选获取数值
    var checkAll = $(input.all);
    var checkboxes = $(input.check);
    checkAll.on(ifChecked ifUnchecked, function(event) {
        if (event.type == ifChecked) {
            checkboxes.iCheck(check);
        } else {
            checkboxes.iCheck(uncheck);
        }
    });
    checkboxes.on(ifChanged, function(event){
        if(checkboxes.filter(:checked).length == checkboxes.length) {
            checkAll.prop(checked, checked);
        } else {
            checkAll.removeProp(checked);
        }
        checkAll.iCheck(update);
    });

 

在解决了全选问题后,又遇到了一个新的问题,获取选中的checkbox的value的时候,使用:$(this).attr(‘checked‘);获取不到值了~,蛋疼。

最后几经Google搜索,还是在stackoverflow 找到了启发,判断checkbox的布尔值,使用 :$(this).is(‘:checked‘);

最后代码的解决方法如下:

$(".ajax-delete").click(function(){
    var url = $(this).attr(data-url);
    var str="";
    var ids="";
    $("input[name=‘id‘]:checkbox").each(function(){
        if(true == $(this).is(:checked)){
            str+=$(this).val()+",";
        }
    });
    if(str.substr(str.length-1)== ,){
        ids = str.substr(0,str.length-1);
    }
    console.log(ids);
});

 

延伸:

1.判断已选中的个数/长度

var len = $("input[name=‘id‘]:checkbox").length;

 

 

来自:http://www.tuicool.com/articles/aANRBv

官网:http://www.bootcss.com/p/icheck/

 

iCheck的全选和获取value

标签:ajax   checkbox   log   each   tac   插件   height   art   全选   

原文地址:http://www.cnblogs.com/xcsn/p/6307610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!