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 ...
随机推荐
- 【转载】Vue自定义指令实现pc端加载更多
转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...
- css 冷知识
*{margin: 0;padding: 0;} li{list-style-type:none; }ul{list-style: none;}img{border: none;}ul,input,s ...
- 今天聊一聊Java引用类型的强制类型转换
实际上基本类型也是存在强制类型转换的,这里简单提一下.概括来讲分为两种: 1.自动类型转换,也叫隐式类型转换,即数据范围小的转换为数据范围大的,此时编译器自动完成类型转换,无需我们写代码 2.强制类型 ...
- Python学习笔记七
面向对象编程 面向对象的特性如下: 类:具有相同属性和方法的一类事物,成为类. 对象:类的实例化后的结果,一个类可以实例化多个对象,每个对象也可以不同的属性. 封装:在类中对数据的赋值,类里面包含着类 ...
- Sass 增强语法的样式表
功能: 完全兼容CSS3 相对CSS,扩展了变量.嵌套和mixins 对控制颜色和其他值的非常有用的方法 高级功能,如库的直接控制 良好的格式,自定义输出 语法 对于Sass,有两种语法. 一种叫SC ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- Concept of function continuity in topology
Understanding of continuity definition in topology When we learn calculus in university as freshmen, ...
- 关闭IIS开启自启
关闭IIS开启自启 win+R输入services.msc 找到服务名称为World Wide Web Publishing Service 双击停止,右键禁用
- 合并K个排序链表
合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] 输出: 1-&g ...
- ISP PIPLINE (八) RGB2YUV
what is the YUV? 暗电流来源1.YUV 是一种基本色彩空间, 人眼对亮度改变的敏感性远比对色彩变化大很多.亮度分量Y 要比色度分量U.V 重要得多. 所以, 可以适当地抛弃部分U.V分 ...