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 ...
随机推荐
- 【MySql】update用法
update 语句可用来修改表中的数据, 简单来说基本的使用形式为: update 表名称 set 列名称=新值 where 更新条件; 以下是在表 students 中的实例: 将 id 为 5 的 ...
- 第二章:Linux 基础篇章
一.shell 在系统中,人所输入到系统内部的命令,以字符类型的形式输入刡系统当中,然而系统 只识别2进制码,就如以前 doc 界面为例,输入的都是字符类的英文字母作为输入的命令代 码,然 而明显二进 ...
- Windows Internals 笔记——线程
1.进程有两个组成部分,一个进程内核对象和一个地址空间.线程也有两个组成部分: 一个是线程的内核对象,操作系统用它管理线程.系统还用内核对象来存放线程统计信息的地方. 一个线程栈,用于维护线程执行时所 ...
- 获取显卡的cuda算力
获取nvidia显卡的cuda算力,在编译cuda相关代码时候可能用到. 前提: 安装了visual studio 安装了cuda(cuda应该在vs之后安装) 安装了cmake 代码 https:/ ...
- Nginx 和 IIS 实现动静分离(转)
转载地址:https://www.cnblogs.com/paul8339/p/5825201.html 动静分离,说白了,就是将网站静态资源(HTML,JavaScript,CSS,img等文件)与 ...
- python之基于libsvm识别数字验证码
1. 参考 字符型图片验证码识别完整过程及Python实现 2.图片预处理和手动分类 (1)分析图片 from PIL import Image img = Image.open('nums/ttt. ...
- pandas合并merge-【老鱼学pandas】
本节讲述对于两个数据集按照相同列的值进行合并. 首先定义原始数据: import pandas as pd import numpy as np data0 = pd.DataFrame({'key' ...
- Scala模式匹配| 隐式转换
1. 模式匹配 Scala中的模式匹配类似于Java中的switch语法,但是更加强大.模式匹配语法中,采用match关键字声明,每个分支采用case关键字进行声明,当需要匹配时,会从第一个case分 ...
- Imcash科普:没有网络也可以转账比特币?你可能有些误解
近日,据Bitcoinist消息,比特币解决方案开发商CoinKite联合创始人Rodolfo Novak和OpenBazaar联合创始人Sam Patterson在推特上宣布,两人不借助互联网和卫星 ...
- Hexo主题yilia增加gitalk评论插件
虽然gitment可以实现评论功能,但是适配方面做的并不好,这里借用GitHub上的gitalk项目用来优化个人博客的评论功能 下面记录自己从gitment到gitalk的替换过程: 1.在layou ...