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 ...
随机推荐
- cocos2dx-lua 文件操作
print("开始") --检查文件是否存在 local path = "ABC.txt" local fileExist = cc.FileUtils:get ...
- JavaScript入门学习笔记(一)
W3cJavaScript教程 JS是JavaScript的缩写,而JSP是Java Server Page的缩写,后者是用于服务器的语言. JavaScript代码写在标签<script> ...
- hadoop家族技能图谱
- [方案]基于Zynq WiFi方案构建
基于Zynq系列,搭建无线传输平台 1) 2.4G 2) 5G AC
- php操作数据库获取到的结果集mysql_result
判断取出的结果集是否为空集: $sql="select adminPwd from adminaccount"; //判断查询是否有数据 if(mysqli_num_rows($r ...
- 即将上线的Imcash是何方神圣?
区块链的诞生,让数字资产来到这个时代,每个人的财产分布又多了一种十分重要的选择. 当下每个人最需要的就是一款优秀的数字资产管理平台,目前市面上各种平台层出不穷,在线管理.离线管理.全节点钱包.轻钱包. ...
- python 爬虫与数据可视化--数据提取与存储
一.爬虫的定义.爬虫的分类(通用爬虫.聚焦爬虫).爬虫应用场景.爬虫工作原理(最后会发一个完整爬虫代码) 二.http.https的介绍.url的形式.请求方法.响应状态码 url的形式: 请求头: ...
- Beta(6/7)
鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...
- python文本读写数据
# 写方法1 f = open('tmp.txt','w') f.write('hello world') f.close() # 写方法2 with open('tmp.txt','w') as f ...
- Hibernate 对象关系映射文件
简介: POJO 类和关系型数据库之间的映射可以用一个 XML 文档来定义 通过 POJO 类的数据库映射文件,Hibernate 可以理解持久化类和数据表之间的对应关系,也可以理解持久化类属性与数据 ...