欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 18:47:44
...

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

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

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