第一种情况

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 全选的更多相关文章

  1. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  2. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  3. JS全选

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. js全选与反选

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  5. js全选checkbox框

    html: <input  type="checkbox" id="checkbox1" value="1" onclick=&quo ...

  6. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  8. JS——全选与反选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js——全选框 checkbox

    一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...

随机推荐

  1. 【Python selenium自动化环境配置】4步搞定ChromeDriver版本选择

    很多刚做自动化的小伙伴,会在ChromeDriver版本选择时犯难,看来大家都被坑过,真正掌握独门绝技,都不是难事儿. 看好了主要步骤就4部 1.确定谷歌浏览器版本 2.找到谷歌浏览器版本与Chrom ...

  2. SSM(SpringMVC Spring Mybatis)框架整合搭建

    1.新建一个web工程. 2.首先看一下整体的框架结构: 3.将ssm框架搭建所需要的jar包复制到lib目录下 3.需要配置各个配置文件. 1)配置web.xml文件: <?xml versi ...

  3. Linux--奇思淫才

    根据进程号找到可执行的文件路径 [ec2-user@baolin ~]$ ll /proc/<pid>/exe lrwxrwxrwx 1 ec2-user ec2-user 0 May 3 ...

  4. Conversation function

    通过conversation function可以把类转成任意类型的值 #include <iostream> using namespace std; class Age { priva ...

  5. kth min_max容斥

    题解: 普通的$min-max$容斥是用来求最后出现元素的期望之类的 $kth min-max$容斥进一步解决倒数第k个出现的元素的期望 给出公式: $kthmax(S)=\sum\limits_{T ...

  6. .net core2.x - 关于仓储(Repository)

    概要:在搭建框架,顺手说下写下,关于Repository,可能你理解了,可能你还不理解,可能与不可能不是重点,重点是感兴趣就看看吧. 1.仓储(Repository)是什么? 看下翻译:仓库; 贮藏室 ...

  7. Python协程与asyncio

    asyncio(解决异步io编程的一整套解决方案,它主要用于异步网络操作.并发和协程)协程(Coroutine一种用户态的轻量级微线程,它是程序级别的,在执行过程中可以中断去执行其它的子程序,别的子程 ...

  8. es ik分词插件安装

    1.ik下载(下载es对应版本的ik分词包) https://github.com/medcl/elasticsearch-analysis-ik/releases 2.mac cd /usr/loc ...

  9. S0.0 计算机如何看东西

    标签(空格分隔):数字图像处理 opencv 当我们用特定软件打开一张图片或者更改某些位图的格式为txt时,就会发现图像的本质不过就是一堆数据罢了. 采样 我们可以用相机采样到一幅二维图像,图像的分辨 ...

  10. docker修改容器信息,打包等

    https://blog.csdn.net/x6_9x/article/details/72891404