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 ...
随机推荐
- SpringBoot(三) Core Features: External Configuration(配置文件)
码云: external-configuration 可以使用属性文件,YAML文件,环境变量和命令行参数来外部化配置 一.属性值可以直接注入到bean 系统属性值不可以 // application ...
- fzu 2139 久违的月赛之二
Problem 2139 久违的月赛之二 Accept: 42 Submit: 106Time Limit: 1000 mSec Memory Limit : 32768 KB Probl ...
- vscode 支持es6语法
在首选项中 设置: "jshint.enable": false, 在根目录中建立eslintrc.yml parser: babel-eslint parserOptions: ...
- AGC009：Eternal Average
传送门 好神啊 直接考虑一棵 \(n+m\) 个叶子的 \(k\) 叉树,根结点权值为 \(\sum_{i\in m}(\frac{1}{k})^{deep_i}\) 对于一个 \(deep\) 的序 ...
- CentOS安装Oracle 11g R2
官方的安装链接: https://docs.oracle.com/cd/E11882_01/install.112/e24326/toc.htm#BHCGJCEA 检查硬件需求 1. 内存需求 物理内 ...
- 当div元素内的内容超出其宽度时，自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
- animation3 背景小动画笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iframe跨源报错:"Blocked a frame with origin from accessing a cross-origin frame"
一.报错信息: “Blocked a frame with origin from accessing a cross-origin frame” 二.在stackoverflow上找到原因 Same ...
- MVP 模式简单易懂的介绍方式
为什么用Android MVP 设计模式? 当项目越来越庞大.复杂,参与的研发人员越来越多的时候,MVP 模式 的优势就充分显示出来了. MVP 模式是 MVC 模式在 Android 上的一种变体, ...
- Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能
看下效果图,自己考虑下自己会如何实现,然后再继续看看作者的实现~ 不记得什么时候,我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能,感觉它很有趣,于是想 ...