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 ...
随机推荐
- Diango 框架起步
一.命令行搭建Django项目 安装django # 在指定解释器环境下安装django 1.11.9# 在真实python3环境下: pip3 install django==1.11.9# 在虚拟 ...
- Flutter终将逆袭!1.2版本发布,或将统一江湖
在去年 MWC 大展上发布首个 Beta 版后,Flutter 1.0 正式版于 2018 年 12 月召开的 Flutter Live 2018 上正式发布.今天在巴塞罗那召开的 MWC 发布会上, ...
- PID控制器开发笔记之十二:模糊PID控制器的实现
在现实控制中,被控系统并非是线性时不变的,往往需要动态调整PID的参数,而模糊控制正好能够满足这一需求,所以在接下来的这一节我们将讨论模糊PID控制器的相关问题.模糊PID控制器是将模糊算法与PID控 ...
- word 内容控件属性编辑
场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...
- iOS开发多线程之NSOperation
NSInvocationOperation The NSInvocationOperationclass is a concrete subclass of NSOperationthat you u ...
- MySQL基本操作练习
-- 数据的准备 -- 创建一个数据库 create database python_test charset=utf8; -- 使用一个数据库 use python_test; -- 显示使用的当前 ...
- 一起学爬虫——使用Beautiful Soup爬取网页
要想学好爬虫,必须把基础打扎实,之前发布了两篇文章,分别是使用XPATH和requests爬取网页,今天的文章是学习Beautiful Soup并通过一个例子来实现如何使用Beautiful Soup ...
- CodeForces 553E Kyoya and Train 动态规划 多项式 FFT 分治
原文链接http://www.cnblogs.com/zhouzhendong/p/8847145.html 题目传送门 - CodeForces 553E 题意 一个有$n$个节点$m$条边的有向图 ...
- Metasploit学习记录---Nessus安装部署
1.Nessus介绍 nessus是目前世界上最为流行的漏洞扫描器之一.她提供完整的电脑漏洞扫描服务,并随时更新其漏洞数据库.Nessus不同于传统的漏洞扫描软件,可同时在本机或远端上遥控,进行系统的 ...
- Java笔记(二十) 注解
注解 一.内置注解 Java内置了一些常用注解: 1.@Override 该注解修饰一个方法,表示当前类重写了父类的该方法. 2.@Deprecated 该注解可以修饰类.方法.字段.参数等.表示对 ...