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

jQuery:如何防止未勾选的商品价格被加到合计中?

在使用jQuery防止未勾选的商品价格被加到合计中时,你需要确保只有被勾选的商品的价格才会被计算到总价中。这通常涉及到检查商品的复选框是否被选中。

以下是一个简单的示例代码,展示了如何实现这一功能:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止未勾选的商品价格被加到合计中</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>商品列表</h2>
<ul id="product-list">
  <li>
    <input type="checkbox" class="product-checkbox"> 商品1 - ¥<span class="product-price">100</span>
  </li>
  <li>
    <input type="checkbox" class="product-checkbox"> 商品2 - ¥<span class="product-price">200</span>
  </li>
  <li>
    <input type="checkbox" class="product-checkbox"> 商品3 - ¥<span class="product-price">300</span>
  </li>
</ul>

<h2>合计: ¥<span id="total-price">0</span></h2>

<script>
$(document).ready(function() {
  // 初始化合计金额
  updateTotalPrice();

  // 监听复选框的点击事件
  $('#product-list').on('change', '.product-checkbox', function() {
    updateTotalPrice();
  });

  // 更新合计金额的函数
  function updateTotalPrice() {
    let total = 0;
    $('.product-checkbox:checked').each(function() {
      total += parseFloat($(this).siblings('.product-price').text());
    });
    $('#total-price').text(total.toFixed(2));
  }
});
</script>

</body>
</html>

在这个示例中,我们有一个商品列表,每个商品都有一个复选框和一个价格。我们使用jQuery来监听这些复选框的change事件。每当复选框的状态改变时,我们就调用updateTotalPrice函数来重新计算总价。

updateTotalPrice函数会遍历所有被选中的复选框,并累加它们对应的价格。最后,将计算出的总价更新到页面上的#total-price元素中。

这样,只有被勾选的商品的价格才会被加到合计中,未勾选的商品价格不会影响总价。

参考链接:

  • jQuery 官网: https://jquery.com/
  • jQuery 选择器文档: https://api.jquery.com/category/selectors/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

美多商城项目(八)

2.1.4全不:将用户购物车所有商品id从redis set移除。 2.2如果用户登录,设置cookie中用户购物车记录状态。 2.2.1获取cookie购物车记录。...cookie购物车数据合并到用户redis购物车记录如何进行合并?...此列表商品id在进行购物车记录合并时,需要添加到redis set。 8.组织一个列表,存储cookie购物车记录未被商品id。...此列表商品id在进行购物车记录合并时需要从redis set移除。 9.遍历解析之后字典,将数据分别加入对应列表。...10.合并:将组织字典key和value作为属性和值设置到redis对应hash元素。 11.将需要添加到redis列表商品id添加到redis对应set元素

1.1K20

jQuery: attr() vs prop()

或者未设置为false): elem.checked // true (Boolean) 会随着状态而改变 jQueryprop()方法是和上面直接取property一样 ,因此: $(...elem ).prop( "checked” ) //true (Boolean) 会随着状态而改变 而拿attribute拿到只是初始值: elem.getAttribute( "checked..." ) // "checked" (String) 记录初始状态, 值为"checked"或者任意你设置值,不会随着状态而改变 jQueryattr()方法获结果也跟getAttribute...是一致: $(‘input[type=“checkbox”’).attr( ‘checked’ ) // 同上一条 至于说jQuery历史版本,attr()实现曾经会跟getAttribute不一致...,比如返回结果是会随着状态变化字符串,或者返回结果是Boolean类型值,知道即可因为现在用法是一致了~

1.5K50
  • 购物车系统设计

    2 主要属性 打开京东购物车页面:SKUID(商品ID)、数量、加购时间和状态 “状态”属性,即在购物车界面,每件商品前面的那个小对号,表示在结算下单时,是否要包含这件商品。...至于商品价格和总价、商品介绍等都能实时从其他系统获取,无需购物车系统保存。 购物车功能简单,但设计购物车系统存储时,仍有一些问题需考虑。...关闭浏览器再打开,这时又变为登录状态,但是之前登录时加购商品已经合并到刚刚登录用户名下了,所以购物车是空。 3.1.4 再打开手机,用相同用户登录,第二步加购商品还在吗? 存在。...数据结构: KEY值6666是用户ID FIELD存放商品ID FIELD_VALUE是个JSON字符串,保存加购时间、商品数量和状态 读写性能,Redis比MySQL快得多,Redis就一定比...6 总结 购物车系统主要功能包括:加购、购物车列表页和结算下单 核心实体:只有一个“购物车”实体 至少包括:SKUID、数量、加购时间和状态属性 在给购物车设计存储时,为确保: 购物车内数据在多端一致

    1.1K30

    【javaScript案例】之类似购物车效果实现

    如下图 image.png 其实这个部分很考验基础功~,我们需要用到table标签,在td写入对应文字(具体可见下方代码,可以根据自己喜好添加样式)。...重点其实在于js部分: 这个效果实现基本功能如下: /不第一列框,对应第五列小计价格会改变,下方合计价格会改变 选择第一行第一列全选按钮,下方所有的复选框都会被选中,对应小计和合计价格都会发生改变...选择第四列-和+,表示要选购该物品数目,相应小计和合计价格会发生改变 点击最后一列删除键,相应行会消失,同时合计数目会发生改变 要从哪下手呢,我们按照顺序来解决~ 我们首先通过document.getElementsByTagName...要记住必须要通过一个变量来表示是从选中->选中,还是选中->选中。然后如何修改其内容呢?...关于全选实现效果,我们可以和复选框修改内容使用部分相同代码,(具体可见下面的代码),要记住我们还是需要记录一个变量来判断复选框是否全选->判断对应价格是否要发生变化。

    87910

    VR开发--SteamVR框架工具(4):可交互对象+抓取交互对象+使用可交互对象+自动抓取可交互对象

    所以最好使用控制器子物体抓握机制(Child_Of_Controller)来防止这种情况。 Hold Button To Grab:如果,控制器就需要持续按住设置为抓握按钮来保持抓握状态。...如果没有,抓握按钮切换抓握行为通过按下一次抓取,再按一次释放。 ?...这个选项在被以 后,为了防止在用一个指针来使用对象时发生不必要传送,就不会抛出目标点设置( Destination Set )事件。...Create Rigid Body When Not Touching:如果,当抓取按钮按下时,如果控制器没有碰到一个可交互对象,那么添加到控制器上刚体就允许控制器去推动周围其他刚体对象。...Clone Grabbed Object:复制抓取对象: 如果,Object To Grab(抓取对象)将被复制到一个新对象并添加到控制器上,而被复制对象留在场景里。

    2.4K10

    【Unity3D 灵巧小知识点】 ☀️ | 快速查找场景Raycast Target游戏对象

    【Unity3D 灵巧小知识点】 ☀️ | 字符串截取,截取某个路径字符串 末尾文件 名字 47/100 发布文章 zhangay1998 选择任何文件 Unity 小科普 老规矩,先介绍一下...---- Unity小知识点学习 快速查找场景Raycast Target游戏对象 在UnityUI事件会在EventSystem在UpdateProcess触发。...,而且有时候还会阻挡住对其他UI交互行为 因为很多UI元素叠加到一起,如果都了Raycast Target肯定会出现部分UI元素是无法进行交互,因为遮盖住了 所以这里教大家怎样快速查看场景中有哪些...UI元素了这个Raycast Target 至于怎样优化事情,后面会更详细介绍,就不在这个小知识点文章中介绍啦!...,所有RaycastTargetUI元素都会出现一个边框,则不会出现 RaycastTarget在监视器面板上可以随时取消,要注意是边框只在Scene视图中可以看到,Game视图是看不到

    76810

    你可以这样写需求文档 第03期:功能按钮

    ; 3)需要写明校验,比如哪些字段 + 哪些字段校验哪个菜单是否存在,或者是否审核通过才可以添加成功等; 4)唯一性校验,哪些字段合计值是个唯一值,比如字段 xx + xx 系统已存在; 5)所有的校验提示需要精确...3.编辑(修改) 1)一定是要,记住,一定要数据才可以操作; 2)同添加(新增)一样,也是优先需要一个正向描述; 3)其他多一个就是一个数据,是否多行,如果是每行数据编辑按钮,这个可忽略...4.删除 1)一定是要,记住,一定要数据才可以操作; 2)正向条件:注意数据后防止用户错误操作,最好是再加一个二次确认,因为确实会有很多用户操作很不小心; 3)逆向条件:禁止删除情况校验,...8.审核驳回 1)一定是要,记住,一定要数据才可以操作; 2)正向条件:什么条件可以正常审核驳回,一定需要填写驳回原因,这个是要制单人可以很清楚知道自己数据为什么驳回了; 3)逆向条件:哪些条件下不能驳回...10.打印 1)一定是要,记住,一定要数据才可以操作; 2)模板:打印一定要描述清楚模板,模板样式,每个位置字段取值逻辑,这里也需要UI画清楚; 3)正向条件:描述清楚什么条件下可以打印,

    76830

    内存卡数据恢复,3个方法帮你找回丢失照片和视频

    设备提示内存卡无法读取或格式化。文件消失:内存卡缺少某些文件、某些文件突然消失或变成无法打开格式。...容量显示异常:内存卡容量显示异常,如容量变为0或显示不正确。文件系统显示RAW格式。如何恢复内存卡丢失照片、视频等数据?(3个方法)当内存卡数据丢失时,可以尝试以下几种方法进行恢复。...第三步、在菜单栏中选择“查看”,然后“隐藏项目”。如果文件只是隐藏了,通过这种方法可以恢复显示。方法2、从备份还原丢失文件定期备份是预防数据丢失重要措施。...“完整恢复”,然后点击“开始”按钮,进入扫描进程,耐心等待扫描结束。在扫描结果寻找丢失文件,然后将文件导出复制到电脑硬盘。Recuva:启动软件,选择文件类型为“图片”、“视频”等。...在扫描结果中找到丢失文件,并点击“恢复”按钮。保护内存卡数据安全一些建议为了避免内存卡数据丢失,平时应注意以下几点:1. 定期备份:养成定期备份数据习惯,防止数据意外丢失。2.

    19910

    Mybatis-Plus基础功能测试使用

    老板先是通知小李,说你去把商品价格增加50元。小李正在玩游戏,耽搁了一个小时。正好一个小时后,老板觉得商品价格加到150元,价格太高,可能会影响销量。又通知小王,你把商品价格降低30元。...小李操作时候,系统先取出商品价格100元;小王也在操作,取出商品价格也是100元。...是的,如果没有锁,小李操作就完全小王覆盖了。 现在商品价格是70元,比成本价低10元。几分钟后,这个商品很快出售了1千多件商品,老板亏1多万。...如果修改过了,则重新取出修改后价格,150元,这样他会将120元存入数据库。 如果是悲观锁,小李取出数据后,小王只能等小李操作完之后,才能对价格进行操作,也会保证最终价格是120元。...,而是通过一个变量来让他失效 deleted = 0 ——> deleted = 1 管理员可以查看被删除记录,防止数据丢失,类似于回收站功能。

    87310

    使用Git一些必备技巧

    stash意味着你有提交更改,将会在拉取代码时候防止本地修改被覆盖。...防止丢失 stash 备份本地修改 ,仍旧是防止丢失,且可以有多个版本 很灵活 演示-Stash如何使用 规避文件修改冲掉 我们假设有两个人正在操作同一份文件 README.md 。...机制B君做了如下操作 Stash了将本地修改在这里 B君 : 点击 可将指定Stash文件与更新后文件合并。 Stash 简单理解就是备份本地修改,且可以备份多次。什么?又冲突了?...我并不知道你修改了什么个文件,我也不想在同步时候把本地修改冲掉。那我提前 commit 这些个文件吧。 这个Push Change不用,反正也上传不了但是不影响commit。...现在pull也可以合并本地文件 commit 简单理解就是保存本次修改,且可以追溯。什么你只会Stash?直接commit也行啊! 如何强推? 理解了上面的之后。

    7910

    简单认识一下CleanMyMac X这款软件有哪些免费功能

    虽然说mac平时不需要大量维护进行清理但是有一些临时文件、软件残留、系统缓存、下载安装包还是会日积月累降低mac速度,还占有大量储存空间下面其他文件,有时候占用了十几合计,甚至上百G空间。...下面,小编就带大家简单认识一下如何利用CleanMyMac X这款软件进行系统清理。打开已经安装好软件后,会显示以下窗口。...点击了“查看详情”之后,我们会看到系统垃圾文件类型以及大小,这时候我们可以根据自我需求需要被清理内容。...完毕之后,我们可以通过点击“返回摘要”返回到之前扫描界面上,并点击下方“运行”进行最后清理工作。最终我们能看到清理后结果,例如清理了多大垃圾,以及可以点击界面下方“查看日志”。...在清理日志,我们可以清楚地看到具体哪些内容清理了,并且有对应大小,非常方便大家查看是否有遗忘想要清理内容。这样简单系统清理工作就大功告成啦,不知道你有没有看会呢?

    68300

    学会这个,领导要结果立马就有

    这三个字段同时也加到数据透视表,如图: image.png 数据透视表结构,就是当把不同字段拖到行、列标签,数据透视表也会按照不同维度来进行呈现。...通过以上数据透视表,我们汇总了销售阶段与赢单率交叉表金额合计值。 从表可以快速地看到不同销售阶段里各赢单率下金额合计结果。...所以,这里我是“现有工作表”,位置是“结果”表里A25单元格。然后就在“结果”表A25行里,创建了一张空透视表。 image.png 下面又来进行鼠标拖拖拖大法了。...要制作 “所属领域”字段切片器,单击透视表里任一单元格,在【数据透视表工具】-【分析】-【插入切片器】,在弹出【插入切片器】对话列表框里,是原始数据所有字段列表,我们“所属领域”,就会生成了以...【总结】 做完这套面试题,相信你已经学会了: (1)如何用数据透视表进行汇总分析 (2)如何制作切片器 image.png 推荐:人工智能时代,你必须要学会这个通用技能 image.png

    2.5K00

    VR开发--SteamVR框架工具(2):激光指针与贝塞尔曲线激光指针

    Enable Teleport(启用传送):如果了,在目标设置事件teleport标志位就设为true,所以传送脚本就知道是否要行动到新目标。...如果这个选项没有的话,控制器光束启动但是不会触发位移。 Point Hit Color(指针碰撞颜色):当光束和一个有效目标碰撞颜色。每个控制器可以有不同颜色设置。...事件将不会被触发,这将防止传送到游玩区会发生碰撞区域。...贝塞尔指针脚本加到[CameraRig]预制里控制器对象上,控制器对象同时需要添加VRTK_ControllerEvents脚本用来监听控制器按钮开关光束事件。 ? (2)脚本及相关属性 ?...Enable Teleport(启用传送):如果了,在目标设置事件teleport标志位就设为true,所以传送脚本就知道是否要行动到新目标。

    50310

    SQL Server 2012 数据库备份还原「建议收藏」

    ② 完整恢复模式:数据库完整地记录了所有的事务,并保留所有事务详细日志。支持恢复到出现故障时间点。该模式可在最大范围内防止出现故障时丢失数据,为数据安全提供了全面的保护。...在“还原数据库”窗口中,选择源为“设备”,点击“…”按钮 弹出“选择备份设备”窗口,点击“添加”按钮,选择对应备份设备,返回“还原数据库”窗口 选择需要还原数据库,需要还原备份文件...选择源为“设备”,点击“…”按钮 弹出“选择备份设备”窗口,点击“添加”按钮,选择对应备份设备,返回“还原数据库”窗口 选择需要还原数据库,需要还原备份文件,点击“确定”进行还原...” 在“还原数据库”窗口中,选择源为“设备”,点击“…”按钮 弹出“选择备份设备”窗口,点击“添加”按钮,选择对应备份设备,返回“还原数据库”窗口 选择需要还原数据库,需要还原备份文件...,点击“确定”进行还原 在选择页中选择“选项”,在还原选项“覆盖现有数据库”,并在服务器连接“关闭到目标数据库现有连接”,点击“确定”进行数据库还原 数据库还原成功 使用

    2.7K20

    使用断点调试代码「建议收藏」

    在web开发,打断点是经常使用调试代码方法,现在在这里简略翻译一下官方对此功能讲解,并插入一些自己说明。...对于一些被封装好了 xhr 请求例如 JQuery ajax 方法,浏览器无法定位到调用地方。...操作: f12 -> Source Tab -> 点击 Pause on exceptions 暂停图标 -> 图标变成蓝色,表明启用了在捕获到异常出现时候断点功能。...可选操作: Pause On Caught Exceptions , 能够在捕获到异常情况下也断点。...如果是所有异常都中断(了 Pause On Caught Exceptions),那么代码执行到会产生异常 throw 语句时就会自动中断;而如果是仅遇到捕获异常才中断,那么这里就不会中断。

    1.3K20
    领券