zoukankan      html  css  js  c++  java
  • iCheck的全选和获取value

    一、全选

    在使用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;

    三、radio

    问题: 同时可选中多个值

    解决: 设置同一范围内的选项的name一致,原因是由于个别选项单独处理而没有设置name

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

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

  • 相关阅读:
    c函数调用过程
    查找匹配行及前后5行
    指向类成员函数的指针
    C++箴言:理解typename的两个含义
    不定参数
    定时器
    unix编译
    sed
    大脑皮层的梦工厂
    静态链接库顺序问题
  • 原文地址:https://www.cnblogs.com/Alex80/p/7771300.html
Copyright © 2011-2022 走看看