JS 全选
第一种情况
1. 首先得有全选 checkall
<input type="checkbox" class="checkAll" value="on" id="checkall">
2.子选择框也要有 并且得name命名
<input class="inputList" value="@item.id" style="width: 13px; height: 13px;" type="checkbox" name="checkitem">
3.写js样式
////全选
$("#checkall").click(function () {
if (this.checked) { //如果当前点击的多选框被选中
$('input[type=checkbox][name=checkitem]').prop("checked", true);
} else {
$('input[type=checkbox][name=checkitem]').prop("checked", false);
}
});
$('input[type=checkbox][name=checkitem]').click(function () {
var flag = true;
$('input[type=checkbox][name=checkitem]').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$('#checkall').prop('checked', true);
} else {
$('#checkall').prop('checked', false);
}
});
第二种情况 layui框架下的
tableCheck = {
init: function () {
$(".layui-form-checkbox").click(function (event) {
var a = $(".layui-form-checkbox").not('.header').length;
var b = $('.layui-form-checked').not('.header').length + 1;
if (a === b) {
$(".header").addClass('layui-form-checked');
}
if ($(this).hasClass('layui-form-checked')) {
$(this).removeClass('layui-form-checked');
if ($(this).hasClass('header')) {
$(".layui-form-checkbox").removeClass('layui-form-checked');
$(".header").removeClass('layui-form-checked');
}
var flag = true;
$('.layui-form-checkbox').each(function () {
if (!$(this).hasClass('layui-form-checked')) {
flag = false;
}
});
if (flag) {
$("#All").addClass('layui-form-checked');
} else {
$("#All").removeClass('layui-form-checked');
}
} else {
$(this).addClass('layui-form-checked');
if ($(this).hasClass('header')) {
$(".layui-form-checkbox").addClass('layui-form-checked');
}
}
});
},
getData:function () {
var obj = $(".layui-form-checked").not('.header');
var arr=[];
obj.each(function(index, el) {
arr.push(obj.eq(index).attr('data-id'));
});
return arr;
}
}
在前端页面加一个id
<div class="layui-unselect header layui-form-checkbox" lay-skin="primary" id="All"><i class="layui-icon"></i></div>
JS 全选的更多相关文章
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- JS全选
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- js全选与反选
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- js全选checkbox框
html: <input type="checkbox" id="checkbox1" value="1" onclick=&quo ...
- Js全选 添加和单独删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- JS——全选与反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js——全选框 checkbox
一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...
随机推荐
- 转载:.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法
.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法 阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集 ...
- 【git】将本地项目上传到远程仓库
飞机票 一. 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: htt ...
- SQL Server中文排序混乱
在sql语句中指定了含有中文的列进行排序,但排序结果看起来毫无规则,并不是按照拼音进行排序的检查了DB的Collation后,发现是SQL_Latin1_General_CP1_CI_AS解决方法: ...
- 一JavaScript获取当前月份的前12个月,获取最近的12个月二js实现获取当前月份前的12个月份,格式化后放在一个数组里
一 ,var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMon ...
- 简单几步让网站支持https,windows iis下https配置方式
1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...
- [DIV+CSS] set the screen capture Part 1 (div截取屏幕)
使用下面的代码来获取屏幕.用DIV加CSS 来控制. 使用mousemove来获取移动的时候DIV的变化, 效果图如下: 使用5个DIV来组成实现截图目的第一部分,现在只是实现了选择的第一部分. HT ...
- using 关键字的作用
我们都知道可以使用using关键字引入命名空间,例如:using namespace std; using还有个作用是在子类中引入父类成员函数. 1) 当子类没有定义和父类同名的函数(virtual也 ...
- Scala变量| 流程控制
Scala 是 Scalable Language 的简写,是一门多范式(编程的方式)的编程语言 Scala是一门以java虚拟机(JVM)为目标运行环境并将面向对象和函数式编程的最佳特性结合在一起的 ...
- js 30Dom应用
1.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 给open传网址 如果是外站就加个http <input type="button" value= ...
- poj1106-Post Office(DP)
Description There is a straight highway with villages alongside the highway. The highway is represen ...