jquery iCheck的全选和获取value

简介:   jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto)。最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新。   特点:在不同的浏览器和设备(桌面和移动)一致的输入体验,触摸设备支持(iOS、Android、Windows Phone、黑莓、亚马逊的Kindle),键盘可输入(制表符,空格键,向上或向下键和其他快捷键),屏幕阅读器可以输入(画外音和其他属性,定制的咏叹调)自由(使用任何HTML和CSS样式输入或尝试6视网膜准备皮),体积轻巧(1 KB的压缩包)。

  jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto)。最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新。

  特点:在不同的浏览器和设备(桌面和移动)一致的输入体验,触摸设备支持(iOS、Android、Windows Phone、黑莓、亚马逊的Kindle),键盘可输入(制表符,空格键,向上或向下键和其他快捷键),屏幕阅读器可以输入(画外音和其他属性,定制的咏叹调)自由(使用任何HTML和CSS样式输入或尝试6视网膜准备皮),体积轻巧(1 KB的压缩包)。

  提供32个选项自定义复选框和单选按钮,11回调处理变化,以编程方式更改的9种方法。保存对原始输入的更改,和各种选择器一起紧密的工作。

  官方地址:http://plugins.jquery.com/icheck/

  演示地址:http://icheck.fronteed.com/

  开源地址:https://github.com/fronteed/iCheck

一、全选

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

 

相关文章
|
5月前
|
JavaScript 前端开发
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
22 0
|
5月前
|
JavaScript
JQuery 获取选中多选框的value,合并成字符串传给后台
JQuery 获取选中多选框的value,合并成字符串传给后台
21 0
|
JavaScript
jquery获取多个相同name的input的value值
jquery获取多个相同name的input的value值
|
JavaScript
JQuery max-height的value不能为数值
JQuery max-height的value不能为数值
81 0
|
JavaScript 索引
jQuery操作select下拉框的text值和value值的方法
1、jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2、jquery获取当前选中select的value值 $("#select1").
1123 0
|
JavaScript
JQuery max-height的value不能为数值
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/49121351 JQuery max-height的value值只能是百分比和像素值,却不能指定为数值。
936 0
|
Web App开发 JavaScript 测试技术
JQuery选择器之[attribute^=value]使用注意事项
注意事项一: Firefox下JQuery选择器之[attribute^=value]使用注意事项 之前写的一个脚本中用到了 var bindAttrs = $("[databind^='attr'", item);大家都看出存在的问题了吧? 这脚本用了一段时间了,但一直没用Firefox下测试过, 在其它浏览器下都能正常使用! 今天突然有人发现在Firefox下加载的数据不正确, 经过一段时间的调试,最后发现是代码写的有问题, 犯了一个低级的错误,只写了左中括号,忘了写右中括号。
681 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
7月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload