获取到勾选的复选框数量并进行计算

获取到勾选的复选框数量并进行计算

开发工具与关键技术:VisualStudio C#
作者:落灵
撰写时间:2019/6/8

下面介绍一个非常普遍的功能点,这个功能点在开发项目时经常会用到。它的主要功能时通过勾选复选框或者单选框时,会获取到那个单选框或者复选框的内容(比如价格),然后对这些内容进行计算。
下面这个例子是我在开发航空网上购票系统时一个类似的功能点。它是通过勾选到买保险的复选框,然后将勾选到的保险的价格在总价格面板里进行计算。当有多个保险时,要能够精确地获取到勾选的保险价格,当取消保险的勾选时,总价格面板里也会相应地减去对应保险的价格。
在这里插入图片描述
当乘客不止一位时,点击添加乘客可以勾选保险,当删除多余的乘客时我们也要在总价格面板里减去勾选到的保险价格。因为有多个乘客,所以在获取保险的价格时就不能通过ID的方式获取到保险的价格以及保险的购买人数。所以还是老方法,我们直接用οnclick=’ acquisition(this)’的方法直接获取到点击到的这个复选框或者单选框,从而精确地获取到每一个保险的价格以及改变的购买人数。
在这里插入图片描述
因为后面通过代码添加的HTML内容如果通过之前写的代码获取的话是获取不到的,这跟代码执行的顺序有关。所以要获取到勾选了多少个保险的话,我直接给了它一个计时器,让它每个0.1秒就获取一次勾选的保险数量,这样无论增加或者删除了多少乘客,总价格面板上的价格也会跟着变化
在这里插入图片描述
这就完成了一个简单的勾选复选框来让总价格变化,基本上是用jquery的一些基础知识来完成的。当然,我们也可以让代码更完善,比如移入和移出一个保险的标签时就让对应的保险说明显示和隐藏。下面是在标签里指定了它的移入和移出事件
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值