在jQuery中计算动态隐藏字段
Calculate dynamic hidden field in jQuery
目标:我需要自动计算基于点击是/否单选按钮的"小计"字段。
我有两个问题
- 能够通过点击是/否单选按钮启动"召回"功能
- 能够消除对"拔掉插头"列的依赖,这是我想要摆脱的。
"Yes/No"值分别为"1/0"。公式为(待机功率* (1 或 0))。
测试例: http://www.ppleasysavings.com/testsurvey/
HTML
<form method="post" action="" id="surveyForm">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<th><div align="center">Home Appliance</div></th>
<th><div align="center">Test device?</div></th>
<th><div align="center">Watts on Standby</div></th>
<th><div align="center">Unplug when not used?</div></th>
<th><div align="center">Unplug</div></th>
<th><div align="center">Watts Saved!</div></th>
</thead>
<tr>
<td>50" Plasma TV (191-474 watts)</td>
<div class="option-group">
<td><div align="center">Yes
<input name="didTest1" type="radio" value="1" checked/>
No
<input name="didTest1" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts1" id="standbyWatts1" value="0.75" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug1" id="didUnplug1" type="radio" value="1" checked/>
No
<input name="didUnplug1" id="didUnplug1" type="radio" value="0" />
</div></td>
<td id="unplug_item_1"> 1 </td>
<td><div align="center">
<input name="wattsSaved1" id="wattsSaved1" value="0.75" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Microwave Oven (1440 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest2" type="radio" value="1" checked/>
No
<input name="didTest2" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts2" id="standbyWatts2" value="20.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug2" id="didUnplug2" type="radio" value="1" />
No
<input name="didUnplug2" id="didUnplug2" type="radio" value="0" checked/>
</div></td>
<td id="unplug_item_2"> 0 </td>
<td><div align="center">
<input name="wattsSaved2" id="wattsSaved2" value="0.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Computer (250-400 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest3" type="radio" value="1" checked/>
No
<input name="didTest3" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts3" id="standbyWatts3" value="9.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center"> Yes
<input name="didUnplug3" id="didUnplug3" type="radio" value="1" checked/>
No
<input name="didUnplug3" id="didUnplug3" type="radio" value="0" />
</div></td>
<td id="unplug_item_3"> 1 </td>
<td><div align="center">
<input name="wattsSaved3" id="wattsSaved3" value="9.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tfoot>
<td colspan="5" align="right"><div align="right"><b>Total Watts Saved!</b></div></td>
<td><div align="center">
<input type="text" readonly="readonly" maxlength="8" size="7" value="9.75" id="grandTotal" name="grandTotal">
</div></td>
</tfoot>
</table>
<div align="right">
<input name="reset" type="reset" value="Reset" />
<input type="submit" name="scodeEntry" class="button" value="Submit Results" onclick="return submitSurvey();"/>
</div>
</form>
这里是jQuery
//Auto calculation
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// bind the recalc function to the quantity fields
$("input[name^=standbyWatts]").bind("keyup", recalc);
$("input[name^=didUnplug]").bind("click", recalc);
// run the calculation function now
recalc();
}
);
// used for the survey page
function recalc(){
$("[id^=wattsSaved]").calc(
// the equation to use for the calculation
"sbw * unplug",
// define the variables used in the equation, these can be a jQuery object
{
sbw: $("input[name^=standbyWatts]"),
unplug: $("[id^=unplug_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a integer
return s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").val(
// round the results to 0 digits
sum.toFixed(2)
);
}
);
有些浏览器不喜欢这里的逗号:
unplug: $("[id^=unplug_item_]"),
否则,当复选框选择改变时,我将看到calc函数触发。
至于删除unplug列,您可以使用类似于绑定查询的东西来获取所选复选框的值:
$("input[name^=didUnplug]:checked")
相关文章:
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 带有验证和隐藏字段值的提交按钮
- 主干窗体隐藏字段未呈现
- 清除以前的$_GET值或不获取仅隐藏字段的值
- 添加和删除隐藏字段数组中的值,而不提交表单
- 在控制器上使用“$watch”时,为什么不更新此隐藏字段
- 将选项值附加到隐藏字段
- JQuery获取隐藏字段的值
- MVC+访问控制器中的隐藏字段
- ASP.net Javascript函数中的隐藏字段为null
- 在第一页加载时隐藏字段,而不是在php发布之后
- 表单使用js、html,而不是隐藏字段
- 如何根据文本长度立即显示和隐藏字段?-JQuery
- 在选择更改时显示大于/小于的隐藏字段集
- 如何获取多个复选框值并分配给隐藏字段
- 将会话登录页存储在cookie中以进行表单解析(通过隐藏字段)
- 将布尔值存储在隐藏字段中以进行表单处理
- 如何将多个/不同的隐藏字段插入 XML
- 如何通过 JSP 代码将隐藏字段(Javascript)插入 XML
- 如何使用Java在Selenium WebDriver的隐藏字段中键入一些文本