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 ...
随机推荐
- Spring Boot学习笔记(六)mybatis配置多数据源
application.properties #数据库配置 #数据源类型 spring.datasource.type=com.alibaba.druid.pool.DruidDataSource # ...
- mysql网页客户端工具
mysql数据库的远程管理,云服务器数据库的管理监控等都可以使用 TreeSoft, TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB ...
- yum 安装php7.1
yum install http://rpms.remirepo.net/enterprise/remi-release-6.rpm yum -y install php71-php.x86_64 p ...
- vue 如何将输入框的输入自动小写转大写（使用 v-model 时采取另一种方式）
前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html ...
- JVM的逃逸分析
我们都知道Java中的对象默认都是分配到堆上,在调用栈中,只保存了对象的指针.当对象不再使用后,需要依靠GC来遍历引用树并回收内存.如果堆中对象数量太多,回收对象还有整理内存,都会会带来时间上的消耗, ...
- content-box与border-box区别
理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模 ...
- GIS在水利中的应用
摘要 GIS具有数据存储.查询.统计.图形显示.分析.模拟.决策和预测等功能,在水利中得到越来越广泛的应用,可谓水利现代化的“火车头”. 关键词 GIS 水利 应用 地理信息系统GIS通常泛指用于获 ...
- atitit。流程图的设计与制作 attilax 总结
atitit.流程图的设计与制作 attilax 总结 1. 流程图的规范1 2. 绘图语言2 2.1. atitit.CSDN-markdown编辑器2 2.2. js-sequence-diagr ...
- oracle 用户对象权限
drop user test cascade;create user test identified by test;grant create session to test;grant create ...
- Nginx 配置多站点vhost
假设你想在Linux Nginx中用不同的域名访问不同的目录,这时就要配置多个vhost,具体配置如下,假设网站根目录设定在/var/www/ 1.在/var/www/下新建两个目录 /var/www ...