全选,反选,取消全选

HTML+JS实现一组复选框的全选、取消、反选 HTML+JS实现一组复选框的全选、取消、反选预计效果代码关键代码解释结果展示 预计效果 实现一组复选框的全选、反选、取消选中的功能,界面如下图 代码 该代码可在我的GitHub中找到,链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti... 阅读详情
<div class="layui-form allCheck">
       全选
       <input type="checkbox" lay-skin="primary">
</div>
<div class="layui-form inverseCheck">
    反选
    <input type="checkbox" lay-skin="primary">
</div>
<div class="layui-upload-list" id="GoodsPicture">
      {% for goodPicture in goods_picture_list %}
          <div class="img-list showf">

             <div class="layui-form">
                 <input type="checkbox" name="GoodsPicImg" lay-skin="primary" title="" value="{{goodPicture}}">
             </div>

        <span class="del-img hand"><i class="fa fa-minus-circle"></i></span>
             <img src="/picture/{{goodPicture}}" srcSelf="{{goodPicture}}" alt="图片"
    class="layui-upload-img" class="showf">
          </div>
      {% endfor %}

 </div>

 

    // 全选、取消全选
    var isCheckAll = false;
    $('.allCheck').on('click', function () {
        let type = 'GoodsPicImg'
        if (isCheckAll) {
            $("input[type='checkbox'][name='" + type + "']").each(function () {
                this.checked = false;
            });
            isCheckAll = false;
        } else {
            $("input[type='checkbox'][name='" + type + "']").each(function () {
                this.checked = true;
            });
            isCheckAll = true;
        }
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        })

        // swapCheck(isCheckAll, type)


    })
    //反选
    $('.inverseCheck').on('click', function () {
        let type = 'GoodsPicImg'
        $("input[type='checkbox'][name='" + type + "']").each(function () {
            if (this.checked) {
                this.checked = false;
            } else {
                this.checked = true;
            }
        });
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        })
    })

 

vue2里的el-select实现全选/取消全选/反选功能 我们可以在原有基础上,构建一个符合我们业务需要的el-select组件。因为el-select多选的时候,是不知道你此时具体选中了哪个,它返回的是一个数组,用数组最后一位来判断是否选中哪个,只适用用选中的时候,反选就不行,所以。最后一个操作就是 一个一个选中,如果选中完默认就是全选,可以先把 我们一开始push进去的all先取出来,然后进行比较长度,相等就是全选。接下来我们需要进行全选/取消全选/反选操作,如果要全选,我们得知道用户是否点击了 全选医院 , 阅读详情

相关推荐

Axure高级交互设计:复选框全选反选取消

步骤一:拖入复选框并命名为中继器外复选框,提示信息“选择”,下箭头icon;步骤二:添加中继器外复选框的交互,选中时——两个复选框值为真,取消选中时——两个复选框值为假;步骤四:添加一键反选交互,反选时外部复选框值为假,内部复选框可能有选中的项,所以要选择切换;步骤二:添加下箭头交互,单击时——切换选择弹窗可见性;步骤三:添加一键全选交互,全选时内外复选框的值均为真;

BenLeiQiang的博客 1510

表单复选框按钮全选-取消全选小案例

思路: 第一部分--全选和取消全选做法: 让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可 第二部分--下面复选框需要全部选中,上面全选复选框才能选中: 利用for循环将每个复选框添加点击事件,接着使用一个小技巧(设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false)。再一次使用for循环,当每次点击下面的复选框时,都需要检查一下同类的复选框是否被全部选中。若有一个未被选中,执行if条件语句的内容将flag赋.

m_0_1_0_1的博客 1324

SGO基线解算软件(南方测绘UI设计最美观的一款新版)

不多说,先放地址: 下载地址:https://www.southgnss.com/download_view.asp?did=361 SGO是南方测绘集团广州南方卫星导航仪器有限公司自主研发新一代南方地理数据处理平台软件,对南方特有数据格式文件(STH格式文件)、标准数据格式文件(RINEX格式文件)进行静态数据处理、动态数据后处理和进行RTK结果检验,新增加了北斗数据处理和摄影测量模块,并围绕南方的不同类型测量产品集成多款测绘领域所需的小工具,实现测绘内业数据处理一体化。 相关概念 G..

heirenqiaoke的博客 1万+

js 实现 全选 取消全选 反选 操作

《直接上代碼》 checkbox <script type="text/javascript"> //全选/全不选 function checkChange(param) { //checkChange(this) this传过来的是 <input type="checkbox" onchange="checkChange(this)" id="check...

松红 1478

Ubuntu技巧-Ubuntu远程访问之SSH反向代理

💡大家好,我是可夫小子,《小白玩转ChatGPT》专栏作者,关注AIGC、互联网和自媒体。要把内网的一台的Ubuntu服务器让外面也能访问,总共有三种可行的方案,前面已经介绍了两种方式,今天就来介绍更健壮稳定的方式——ssh反向代理。大概的框架图如下,今天就从服务器购买到设置,手把手的教程,让你花费100块以内,就拥有一个强大的「云服务器」。

可夫小子的频道 1151

ADS新手必看:用Filter DesignGuide快速搞定一个4GHz LC低通滤波器(附保姆级避坑指南)

本文为ADS新手提供了4GHz LC低通滤波器的完整设计流程,重点介绍了如何使用Filter DesignGuide避免参数设置陷阱、正确解读仿真结果以及解决实际电路与理论值的偏差问题。通过真实工程案例,详细讲解了工程创建、Filter DesignGuide配置、电路优化、仿真设置及实际工程中的进阶技巧,帮助工程师快速掌握LC滤波器设计。

weixin_30878501的博客 300

rm命令反向选择删除文件

反向删除文件, 参考这篇文章. http://blog.youkuaiyun.com/web_go_run/article/details/46009723 shopt是设置shell的全局选项 shopt -p 打印所有选项 shopt -s 打印已经打开on的选项 | shopt -s extglob 则是打开某个选项(extglob是在shell中可以使用 正则的意思) shopt -u 显示

择一事终一生 1万+

使用cubeMX生成USB HID设备

本文主要介绍如何使用stm32开发板和cubeMX生成HID设备,供参考。

专注音频,高效工作,快乐生活! 970

全选、反选、取消全选按钮代码以及vue.js全选与取消全选

&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;quot;utf-8&amp;amp;amp;quot; /&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;title

ling_ling1997的博客 567

win10+conda+pytorch-gpu安装

pytorch 官网上只有linux和Mac的程序包,没有windows系统的,但是windows系统还是可以用pytorch的。  github: https://github.com/peterjc123/pytorch-scripts 首先要安装anaconda: 推荐清华镜像 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ ...

一摩尔自由的博客 1万+

励磁电感 Lm 选对了,LLC 才真“高效”:半桥 LLC 效率优化

你有没有遇到过这种 LLC:参数一套下来,ZVS 也有了,波形看着也“挺谐振”,但一上功率——,效率就是死活上不去。我说句直白的:LLC 的“高效”,很大一部分其实是在背后控场。Lm 选小了,励磁电流蹭蹭涨,谐振电流 RMS 变大,导通损耗、开关损耗、整流损耗一起上天;Lm 选太大,又可能把 ZVS 的门槛抬高,轻载掉 ZVS,EMI 也开始作妖。

weixin_43199439的博客 436

jQuery 全选,反选,取消

阅读目录预览源码 预览 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery库--> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </he

wgchen 1548

飞牛fnNAS搭建个人小账本

本文介绍了如何在飞牛NAS上部署ezBookkeeping个人记账应用。该开源工具支持多平台使用,具备双因素认证、多级分类等功能。文章详细讲解了Docker激活、镜像下载、容器部署等步骤,并展示了账户管理、交易记录等基础操作。同时指导用户通过ZeroTier实现远程访问,方便随时随地使用个人记账系统。该方案既保障了数据隐私,又提供了专业记账功能,适合对财务隐私敏感的用户。

dgnankai的专栏 782

jQuery实现全选、反选、取消

需求:经常看到网页上有全选、反选等等按钮,我们用jQuery实现。 DOM实现参照:DOM实现全选、反选、取消。 一个简单的html表格可以写出来,同时让按钮绑定点击事件: &lt;input type="button" value="全选" onclick="allPick();"&gt; &lt;input type="button" value="反选&quot

likunkun__的博客 614

基于STM32L4XX 、HAL库的TMP144YFFR数字温度传感器驱动应用C语言程序设计

define TMP144_ADDRESS 0x00 // 默认为全局地址,用于单器件或MDA命令。#define TMP144_CMD_READ_TEMP 0x00 // 读取温度寄存器命令。if (temp_raw & 0x800) { // 判断第11位(符号位)

PP_Cottage的博客 91

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

DOM实现全选、反选、取消

需求:经常看到网页上有全选、反选等等按钮,我们用DOM实现。 JQuery实现参照:jQuery实现全选、反选、取消 简单写一个表格和选中框: 忽视掉“添加按钮” 直接上代码:在JavaScript代码里 有详细的注释 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UT...

likunkun__的博客 827

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

js实现多选、全选、反选、取消选择(篇一)

就算全世界离开你,还有一个我来陪,我会永远站在你身边。 对于上次的多选和取消选择,我来把它给补充完整,包含全选和反选。 多选和取消选择 效果图如下: 代码如下: <template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item.

纸飞机博客 8253

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

表单的全选、取消全选、反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...

qq_43575703的博客 442

利用JavaScript实现全选、反选、取消全选

如图所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...

weixin_45457515的博客 420

javascript实现全选/取消全选,反选/取消反选

全选/取消全选,反选/取消反选 全选/取消全选反选/取消反选 window.onload=function(){ var targets=document.getElementsByName("checkmost"), selectAll=document.getElementById("sel

啊哈前端的专栏 1535

js实现全选、取消全选、反选

html 看书:<input type="checkbox" name="checkbox" value=1><br> 写字:<input type="checkbox" name="checkbox"value=2><br> 打飞机:<input type="checkbox" name="checkbox"value=3&...

xwc999 393

javascript 全选、取消全选与反选

一、全选与取消全选 html代码 &amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; 看书:&amp;amp;amp;amp;lt;input type=&amp;amp;amp;quot;checkbox&amp;amp;amp;quot; name=&amp;amp;amp;quot;checkbox&amp;amp;amp;quot; value=1&amp;amp;amp;amp;gt;&a

Seeu の Blog 583

jquery 全选 取消全选 反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='./jquery.min.js'></script> </head> <body...

中资上事的博客 410

Python tkinter多选下拉列表框,支持全选、取消全选、反选

Python tkinter 多选下拉列表支持一下滚动条,全选、取消全选、反选,自定义输入框

weixin_46003828的博客 4498

前端之 JS 实现全选、反选、取消选中

代码示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> &...

gs981600308的博客 912

JavaScript之全选和取消全选及反选所有框

JavaScript之全选和取消全选及反选所有框 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音乐盒</title> <style type="text/css"> *{ padding: 0; margin: 0;

m0_50481455的博客 367
上一篇: 多图片上传(预览)
下一篇: layui使用
sunshinefcc
博客等级 码龄10年 17粉丝 38原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值