jQuery全选反选插件
(function($){
$.fn.check = function(options){
var options = $.extend({
element : "input[name='node']"
},options);
return this.each(function(){
var self = $(this);
var elements = $(options.element);
self.click(function(){
elements.each(function(index,dom){
dom.checked = self.prop("checked"); //将本身self的状态赋值给elements的状态
});
});
elements.click(function(){
var leng = elements.filter(":checked").length;
if(leng == elements.length){
self.prop("checked",true);
}else{
self.prop("checked",false);
}
});
});
}
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="selAll"/>全选</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>2.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>3.<input type="checkbox" name="node"/></td>
</tr>
<tr>
<td>4.<input type="checkbox" name="node"/></td>
</tr>
</tbody>
</table>
<script src="../jquery.min.js"></script>
<script src="check.js"></script>
<script>
$("#selAll").check();
</script>
</body>
</html>
自写了一个全选反选的jQuery插件，根据项目需求进行插件的修改，如根据选择的数量来进行是否选中。
jQuery全选反选插件的更多相关文章
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...
- jquery 全选反选 .prop('checked',!$(this).is(':checked'));
//废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...
随机推荐
- oracle数据库逐步学习总结【基础二】
原创作品,转载请在文字开头明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10067872.html 接着上一篇,继续总结! 五.oracle表管理 首 ...
- Python import搜索的路径顺序
在程序中导入时,如下顺序 1.Python 标准库模块2.Python 第三方模块3.应用程序自定义模块 import的搜索顺序: 首先判断这个module是不是built-in即内建模块,如果是 ...
- Python 正则 re.sub替换
# 正则将匹配到的两个字段,都替换成某个值import re s0 = 'BOY and GIRL' s1 = re.sub(r'BOY|GIRL', 'HUMAN', s0) print s1 # ...
- Python逐行读取文件内容
更详细的文件按行读取操作可以参考:http://www.cnblogs.com/xuxn/archive/2011/07/27/read-a-file-with-python.html 一行一行得从文 ...
- request获取当前用户
1.request.getRemoteUser();//获取当前缓存的用户,比如Spring Security做权限控制后就会将用户登录名缓存到这里 request.getRemoteAddr();/ ...
- UEditor百度网页编辑器JSP版配置与调试
最近用公司后台时发现那编辑器还难用,就想着给它换一个.在网上找了下资料也对比了一下,后决定用百度的UEditor. 在UEditor官网下载了一个开发版1.4.3.3Jsp 版本UTF-8编码的压缩包 ...
- ecloipse背景修改豆沙
Eclipse背景色的修改 Eclipse背景色的修改,修改为豆沙色 值是85 123 205 一．修改编辑区 ①这个比较简单一般都会不多说. 1.首先点击Window 然后选择Preferen ...
- 树莓派2 raspyberry Pi2 交叉编译app
Pi 使用的是ARMV7架构的BCM2836, 下载交叉编译器 arm-linux-gnueabihf-gcc 即可. 本地环境: Ubuntu14 + x86_64 1. 下载编译器地址: 1). ...
- kvm 启动libvirtd时出现错误
kvm 启动libvirtd市出现错误: /etc/init.d/libvirtd start启动 libvirtd 守护进程:libvirtd: relocation error: libvirtd ...
- java笔记--关于多线程如何查看JVM中运行的线程
查看JVM中的线程 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3890280.html "谢谢-- ThreadGrou ...