Question

目标：我需要根据点击是/否单选按钮自动计算“小计”字段。

我有两个问题

能够根据点击是/否单选按钮启动“重新计算”功能
能够依赖“Unplug”栏目，我想摆脱它。

“是/否”值分别为“1/0”。公式为（Watts on Standby *（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&quot; 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)
            );              
        }
    );

Answer 1

有些浏览器不喜欢这里的额外逗号：

unplug: $("[id^=unplug_item_]"),

否则，当复选框选择发生变化时，我看到calc函数触发了。

就删除unplug列而言，您可以使用类似于绑定查询的内容来获取所选复选框的值：

$("input[name^=didUnplug]:checked")

计算jQuery中的动态隐藏字段

1 个答案: