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 ...
随机推荐
- 使用css实现炫酷的横屏滚动效果
炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...
- HDU4418 Time travel(期望dp 高斯消元)
题意 题目链接 Sol mdzz这题真的太恶心了.. 首先不难看出这就是个高斯消元解方程的板子题 \(f[x] = \sum_{i = 1}^n f[to(x + i)] * p[i] + ave\) ...
- centos 快速安装wordpress
1.两种方式得到Wordpress 首先你可以去wordpress官方网站看下最新的wordpress的下载地址多少.比如wordpress 3.9.1的下载地址是: http://cn.wordpr ...
- CentOS 7 防火墙端口配置
CentOS 7 防火墙端口配置查看防火墙是否开启systemctl status firewalld 若没有开启则开启systemctl start firewalld 查看所有开启的端口firew ...
- [NodeJs] 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- Git——克隆部分文件
在进行项目开发的时候,有时候会有这样的需求那就是:我们只希望从Git仓库里取指定的文件或者文件夹出来.在SVN里面,这非常容易实现,因为SVN基于文件方式存储,而Git却是基于元数据方式分布式存储文件 ...
- Android View的事件分发机制和滑动冲突解决方案
这篇文章会先讲Android中View的事件分发机制,然后再介绍Android滑动冲突的形成原因并给出解决方案.因水平有限,讲的不会太过深入,只希望各位看了之后对事件分发机制的流程有个大概的概念,并且 ...
- UnicodeEncodeError: 'ascii' codec can't encode characters in position 2-5: ordin al not in range(128)——解决方案备注
在vim中使用ycm插件时,偶尔会出现: “UnicodeEncodeError: 'ascii' codec can't encode characters in position 2-5: ord ...
- opengl学习笔记
准备: 1.准备资源:从GLEW1.13.0下载GLEW,并且解压出glew-1.13.0目录.从FreeGLUT官网下载3.0.0版本.直接从这里下的编译后的FreeGLUT,选for MSVC,下 ...
- 记录一次mybatis查询返回为空数据库却能查询到数据的经历
昨晚上测试人员给发了一条测试数据,说是根据这条数据接口返回信息为空.之后根据给的信息去数据库查询了下,明明是有数据的.但是用mybatis就是查询不出来.奇了怪了,自己测试的数据都能查询出来,为何这条 ...