首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery -选中复选框时删除活动类(多个条件)

jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作。它具有跨浏览器兼容性,并提供了丰富的API,使得开发者可以更加高效地操作DOM元素、处理事件和实现动态效果。

对于选中复选框时删除活动类的需求,可以通过以下代码实现:

代码语言:txt
复制
$(document).ready(function(){
  $('input[type="checkbox"]').change(function(){
    if($(this).is(':checked')){
      $(this).closest('.activity').removeClass('active');
    }
  });
});

上述代码使用了jQuery的选择器和事件处理方法。首先,通过选择器$('input[type="checkbox"]')选中所有类型为复选框的input元素。然后,使用change事件监听复选框的状态变化。当复选框被选中时,使用closest('.activity')找到最近的具有activity类的父元素,并使用removeClass('active')移除该父元素的active类。

这样,当复选框被选中时,与之相关的活动元素将会删除活动类。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统,适用于各类应用场景。产品介绍链接:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于存储和处理各类非结构化数据。产品介绍链接:腾讯云对象存储

以上是关于jQuery选中复选框时删除活动类的解答,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。 一、 遍历元素 jQuery 隐式迭代是对同一元素做了同样的操作。...如果想要给同一元素做不同操作,就需要用到遍历。 语法1 ? 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...商品后面的删除按钮 2. 删除选中的商品 3....清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉...       // 如果小复选框选中的个数等于所有小复选框个数,则选中全选按钮 否则不选中        // .j-checkbox:checked 选中复选框        if ($(

2.6K50

【Java 进阶篇】JQuery 案例:全选全不选,为选择添彩

JQuery 全选全不选实现原理 全选全不选的实现原理十分简单,主要涉及到以下几个步骤: 选择触发全选和全不选操作的元素,如一个复选框或按钮。...使用 JQuery 选择器选中需要进行全选和全不选操作的目标元素,通常是表格中的多个复选框。 为触发元素绑定事件,监听其点击事件。...在事件处理函数中,通过 JQuery 选择器选中目标元素,并设置它们的 checked 属性,实现全选和全不选效果。 下面是一个基本的实现示例: <!...然后,通过为这两元素分别绑定点击事件的处理函数,在函数中根据点击的元素的状态设置目标元素的状态,从而实现全选和全不选的效果。...商品列表 在购物网站的购物车或商品列表中,用户可能需要同时选择多个商品进行结算或删除。全选全不选功能可以大大简化这一过程。 <!

24640

前端成神之路-02_jQuery

4.当我们每次点击小的复选框按钮,就来判断: 5.如果小复选框选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。 6....商品后面的删除按钮 2. 删除选中的商品 3....清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉...3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景 4.这个背景,可以通过名修改,添加删除 ​ 代码实现略。...each里面能拿到内容区域每一个模块元素和索引号 5.判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top 6.就利用这个索引号找到相应的电梯导航小li添加。 ​

2.2K10

一文入门jQuery

对象在操作,更加方便。...语法: $(“.class的属性值”) 获得与指定的class属性值匹配的元素 并集选择器 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 层级选择器 后代选择器 语法: $("...: $(“A[属性名]”) 包含指定属性的选择器 属性选择器 语法: $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器 复合属性选择器 语法: $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器...语法: :checked 获得单选/复选框选中的元素 选中选择器 语法: :selected 获得下拉框选中的元素 DOM操作 内容操作 html(): 获取/设置元素的标签体内容 内容 --> 内容.../js/jquery-3.3.1.min.js"> //分析:需要保证下边的选中状态和第一个复选框选中状态一致即可 function

3.5K20

jQuery」基础 - 02

商品后面的删除按钮 2. 删除选中的商品 3....清理购物车 商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 清理购物车: 则是把所有的商品全部删掉...(详情参考源代码) 1.3.5 案例:购物车案例模块-选中商品添加背景 核心思路:选中的商品添加背景,不选中移除背景即可 全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景 小的复选框点击...: 如果是选中状态,则当前商品添加背景,否则移除背景 这个背景,可以通过名修改,添加删除 代码实现下文。...each里面能拿到内容区域每一个模块元素和索引号 判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top 就利用这个索引号找到相应的电梯导航小li添加。 代码实现略。

2.8K20

jQuery的基本操作

name="milkman"/>,]   [selector1][selector2][selectorN] //概述 复合属性选择器,需要同时满足多个条件使用...(复选框,单选框等,select中的option),对于select元素来说,获取选中推荐使用:selected 描述 查找说有选中复选框元素 HTML代码 <input...,true没选中为false jQuery代码 $("input[type="checkbox"]").porp("checkbox"); 参数properties描述 禁用页面上的所有复选框.../从所有匹配的元素中删除全部或者指定的· class 一个或多个删除的CSS名,请用空格分开 function(index,class) 此函数必须返回一个或多个空格分隔的class名,接受两个参数...· class 一个或多个删除的CSS名,请用空格分开· function(index,class) 次函数必须返回一个或多个空格分隔的class名.接受两个参数,index参数为对在这个集合中的索引值

7.5K20

jQuery 元素操作

遍历元素 ​ jQuery 隐式迭代是对同一元素做了同样的操作。 如果想要给同一元素做不同操作,就需要用到遍历。...商品后面的删除按钮 2. 删除选中的商品 3....清理购物车3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品5.清理购物车: 则是把所有的商品全部删掉....click(function() { // 删除的是小的复选框选中的商品 $(".j-checkbox:checked").parents(".cart-item")....2.全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景4.这个背景,可以通过名修改,添加删除

1.9K10

jQuery

结尾的div 元素 $("div[id*='bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素...input $("option:selected") // 匹配选中的 option 4.表单选择器 $(":input") //匹配所有 input, textarea, select...,推荐使用$("input:text")效率更高,下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框...删除元素/内容 remove() - 删除被选元素(及其子元素) remove() 中添加参数,删除对该元素进行过滤 empty() - 从被选元素中删除子元素 jQuery 操作 CSS addClass...() - 向被选元素添加一个或多个css removeClass() - 从被选元素删除一个或多个css toggleClass() - 对被选元素进行添加/删除的切换操作 css() - 设置或返回样式属性

4.6K10

Web阶段:第五章:JQuery

点击:API文档下载 Jquery介绍 1.什么是JQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js库。...匹配给定的属性是以某些值结尾的元素 [attribute*=value] 匹配给定的属性是以包含某些值的元素 [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件使用...这个this对象是当前正在响应事件的dom对象 // 需要检查一下,是否全部的球类复选框选中了 // 如果都选中了,设置【全选/全不选 】也选中,反之亦然...divEle = $('div:first'); $('#btn01').click(function(){ //addClass() - 向被选元素添加一个或多个...blueBorder"); }); $('#btn02').click(function(){ //removeClass() - 从被选元素删除一个或多个

26.1K20

JQuery选择器和JQuery包装集

(“id”); JQuery对象获取方法: 单个对象:var objDiv = $ (“#Id"); 多个对象:var arrObj = $('div'); //警告:此处是JQuery语法形式,但依然是...(根据元素的css选择) $("*")选择页面所有元素(选择所有元素) $("#divId, element, .class")(可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容...$("input[id][name$='...']")复合属性选择器,需要同时满足多个条件使用 [id][name$='...']...表单过滤器 $("input:enabled")匹配所有可用元素 $("input:disabled")匹配所有不可用元素 $("input:checked")匹配所有选中的被选中元素(复选框、单选框等...对象,而是DOM对象} JQuery包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法 在使用JQUERY,当 DOM(文档对象模型) 已经加载完成,就会发生 ready 事件

3.1K20

jquery选择器用法_jQuery属性选择器

在一个页面中,一个元素可以有多个CSS,一个CSS又可以匹配多个元素,如果有元素中有一个匹配的名称就可以被选择器选取到。...(可以是ID选择器、元素选择器或是名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的...selector2:另一个有效的选择器,可以是ID选择器、元素选择器或名选择器等 selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或名选择器等...//匹配name属性以test结尾的div元素 [selector1][selector2][selectorN] 说明:复合属性选择器,需要同时满足多个条件使用...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除

12.1K30

JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)

class属性值匹配的元素; 4)并集选择器:$("选择器1,选择器2"),获取多个选择器选中的所有元素。...,包含多个属性条件的选择器 【练习案例】:主要看标签中的内容,注意各种条件的写法 <!.../复选框选中的元素; 4)选中选择器::selected获得下拉框选中的元素; 【练习案例】:主要看标签中的内容,注意各种条件的写法 <!...对象的 length 属性获取复选框选中的个数 $("#b3").click(function () { alert($("input[type... 元素的值" id="b2"/> <input type="button" value=" 利用 <em>jQuery</em> 对象的 length 属性获取<em>复选框</em><em>选中</em>的个数" id="b3"

4.5K30
领券