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/
iCheck的全选和获取value的更多相关文章
- BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...
- jquery iCheck的全选和获取value
jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto).最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新. 特点:在不同的浏览器和设备(桌面和移 ...
- JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CheckBox复选框全选以及获取值
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)
jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
- JavaScript实现表单的全选,反选,获取值
构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
- 全选,反选,获取值ajax提交
//必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
随机推荐
- [Algorithm] Longest Substring Without Repeating Characters?
Given a string, find the length of the longest substring without repeating characters. Example 1: In ...
- [Algorithm] Delete a node from Binary Search Tree
The solution for the problem can be divided into three cases: case 1: if the delete node is leaf nod ...
- Tomcat下设置项目为默认项目
项目的实际使用中常常须要将当前项目设为tomcat的默认项目,而不是进入到tomcat的页面,有几种方法能够实现,注意另外一种.第三种情况须要先删除webapps下的ROOT文件夹,否则会失败. 一. ...
- pycharm+python+Django之web开发环境的搭建(windows)
转载:https://blog.csdn.net/yjx2323999451/article/details/53200243/ pycharm+python+Django之web开发环境的搭建(wi ...
- .NET 服务器定位模式(Service Locator Pattern)——Common Service Locator
本文内容 场景 目标 解决方案 实现细节 思考 相关模式 更多信息 参考资料 Common Service Locator 代码很简单,它一般不会单独使用,而是作为一个单件模式,与像 .net Uni ...
- 撼动 IT 界的十大编程语言【转载+整理】
提这些的目的是要保持关注最新的技术.如果你是一个程序员,想要探究未来技术,那这篇文章是你的必读之选.这里列出了10种编程语言,它们可能会改变IT界的工作方式. 下面这些语言都有其实际的需求,举例来说, ...
- 【树莓派】crontab设置Linux设备定时重启
简介:设置Linux设备定时重启或者关机 问题:有台设备每天总需要使用的人手动重启一下才可以正常工作,但是检查了日志,看起来服务一切都正常.时间和正确时间相差4mins. 解决办法: 1.增加定时任务 ...
- 【树莓派】树莓派与XBMC及Kodi、LibreELEC插件(二)
之前的相关文章参考: [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(一) [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(二) [树莓派]树莓派与XBMC及Kodi.Li ...
- Ubuntu 12.04.1 mysql从5.5升级到5.6
Ubuntu 12.04.1 mysql从5.5升级到5.6 1 2 3 4 5 apt-cache search mysql-server sudo apt-add-repository ppa: ...
- kube-proxy源代码分析
摘要:假设你对kube-proxy的工作原理有一定的了解.本文基于kubernetes v1.5代码对kube-proxy的源代码文件夹结构进行了分析,并以iptables mode为例进行了完整流程 ...