第一种情况

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. vue.js过滤器

    import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...

  2. 动态加载机Servlet容器加载器

    动态加载是Servlet 3.0中的新特性,它可以实现在 不重启Web应用的情况下加载新的Web对象(Servlet. Filter.Listener).Servlet容器加载器也是Servlet 3 ...

  3. jquery 第二章

    1.本章目标    css样式    选择器2.css样式    宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...

  4. Linux-CentOS 重置root密码

    1. 重启服务器,在读秒的时候按任意键,就会出现如下界面 2.接着按下e就会进入到如下界面. 将光标移动到kernel那一行,然后再一次按‘e’,进入kernel该行的编辑界面 3.这就是kernel ...

  5. UOJ#36. 【清华集训2014】玛里苟斯 线性基

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ36.html 题解 按照 $k$ 分类讨论: k=1 : 我们考虑每一位的贡献.若有至少一个数第 $i$ ...

  6. LightOJ 1031 Easy Game (区间DP)

    <题目链接> 题目大意: 给定一段序列,两人轮流取数,每人每次只能从序列的两端的任意一段取数,取的数字位置必须连续,个数不限,问你这两人取数的最大差值是多少. 解题分析: 每人取数时面对的 ...

  7. POJ 1515 Street Directions (边双连通)

    <题目链接> 题目大意: 有m条无向边,现在把一些边改成有向边,使得所有的点还可以互相到达.输出改变后的图的所有边(无向边当成双向的有向边输出). 解题分析: 因为修改边后,所有点仍然需要 ...

  8. python 试题

    1.现有两元祖 (('a'),('b'),('c'),('d') ) ,请使用Python中的匿名函数生成列表 [ {'a':'c'},{'c':'d'}] 答案:v = list(map(lambd ...

  9. NOIP2011 D2T3 观光公交 做题笔记

    目录 归纳题目的性质 算法 60分 100分 code 大家来找茬 总结 归纳题目的性质 每一个加速器效果相同(1) 车子等到所有人上车之后才会发车, 这个最早发车时间不由加速器的配比决定(2) 要优 ...

  10. 2017-10-29—英语发音的一些技巧总结

    学习了这么多年英语还是一句口语也说不出口,大家一定像我一样有hin多的f*k想说. 在很小的时候我们就学了英语音标,知道了有前元音.中元音.后元音(很多同志多年不用应该已经把这些忘得差不多了,like ...