jq得到总价
<html>
<head>
<title></title>
{load href="/static/js/jquery-1.9.1.min.js" /}
</head>
<body>
门票产品
<br>
<form name="form1" method="post" action="" >
<table>
<tr>
<!--<td><input type="checkbox" onClick="checkAll('aa',this)">全选</td>-->
<td><input type="checkbox" id="checkAllChange">全选
</td>
<td>产品</td>
<td>主产品名字</td>
<td>子产品名称 </td>
<td>数量 </td>
<td>价格</td>
</tr> {volist name="data" key="k" id="vo"}
<tr>
<td>
<input type="checkbox" name="checkbox" id="r" ></td>
<td>{$k}</td>
<td>{$vo.name}</td>
<td>{$vo.tickets_name}</td>
<td><input type="text" value="{$vo.quantity}"></td>
<td><input type="text" value="{$vo.price}" id="price"></td>
<input type="hidden" value="{$vo.goods_id}" name="goods_id">
<input type="hidden" value="{$vo.sub_id}" name="sub_id">
<input type="hidden" value="{$vo.member_id}" name="member_id">
<input type="hidden" value="1" name="type">
<td><a href="/Index/member/cart_delete/id/{$vo.id}" onclick="confirm('确定要删除吗')">删除</a></td>
</tr>
{/volist} </table>
<p>总价<input type="text" id="total" value="" name="total"/></p>
<p>
<input type="button" value="提交订单">
</p>
</form>
{$data->render()}
<br>酒店产品
{volist name="data1" key="k1" id="v"}
<p> 产品{$k1}
主产品名字:{$v.name} 子产品名称 {$v.room_name}
数量{$v.quantity}
价格{$v.price}
<a href="/Index/member/cart_delete/id/{$v.id}" onclick="confirm('确定要删除吗')">删除</a>
</p>
{/volist}
{$data1->render()}
</body>
</html>
<script>
$(function(){
var totalprice=0;
$(":button").click(function() {
$(":checkbox:checked").closest("tr").find("#price").each(function(i, eleDom){
// 遍历每个被选中的复选框所在行的文本框的值, 看你怎么用了,你要哪个
//alert('第 ' + (i+1) + ' 个文本框的值: ' + eleDom.value);
totalprice+=parseInt(eleDom.value);
});
$('#total').val(totalprice);
});
}); $("#checkAllChange").click(function() {
if (this.checked == true) {
$("input[name='checkbox']").each(function() {
this.checked = true;
});
} else {
$("input[name='checkbox']").each(function() {
this.checked = false;
});
}
}); </script>
jq得到总价的更多相关文章
- jq实现简单购物车增删功能
https://www.cnblogs.com/sandraryan/ jq实现购物车功能 点击+- 增减数量,计算价格: 点击删除,删除当前行(商品) 点击- ,减到0 询问是否删除商品 点击全选 ...
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
- jq 根据值的正负变色
效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...
- jq 个性的隔行变色
效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
随机推荐
- Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1
Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子 ...
- Zbar和Z*算法对比
博客转载自:https://blog.csdn.net/qishandaxue/article/details/45481387 移植zbar和zxing源码到linux平台,zbar移植的是C源码, ...
- Java-马士兵设计模式学习笔记-工厂模式-单例及多例
一.单例的作用是用于控制类的生成方式,而不让外部类任意new对象 1.Car.java import java.util.ArrayList; import java.util.List; publi ...
- CF1063B Labyrinth
大家一起膜Rorshach. 一般的$bfs$会造成有一些点访问不到的情况,在$system\ test$的时候会$WA40$(比如我……). 发现这张地图其实是一个边权只有$0/1$的图,我们需要计 ...
- 树莓派研究笔记(8)-- 编译lakka v2.1源码
Lakka越玩越觉得强大.如果要是能自己修改一下代码,实现自定义的一些操作就更好了.还可以修复字体文件,修复在部分机器上自动更换Mac地址导致ip变化的问题. 所以我们来尝试编译这个系统.这篇文章几乎 ...
- eclipse中jad反编译工具的安装
我的云盘:工具里面有 Q:为什么有必要在开发环境中配置反编译工具呢? A: 当运行引用了第三方jar包项目时,突然报出了jar包中的某个类的某一行出现异常.我们想看一下这个class文件的代码时,经 ...
- React 和 Redux理解
学习React有一段时间了,但对于Redux却不是那么理解.网上看了一些文章,现在把对Redux的理解总结如下 从需求出发,看看使用React需要什么 1. React有props和state pro ...
- 通过shell脚本开始和结束守护进程
//关闭脚本 #!/bin/sh WHOAMI=`whoami` PID=`ps -u $WHOAMI | grep 守护进程名 | awk '{print $1}'` if (用户名 "$ ...
- Java50道经典习题-程序47 输入数字打印星号
题目:读取7个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*. import java.util.Scanner; public class Prog47{ public static ...
- 1、Tomcat7性能监控与优化
1. 目的 通过优化tomcat提高网站的并发能力. 2. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定性影响. 3. 优化配置 3.1. 配置tomcat管理员账户 ...