jQuery에서 동적 숨김 필드 계산하기

Question

목표 : 예/아니요 라디오 버튼을 클릭하여 "부분합"필드를 자동 계산해야합니다.

는

는 "분리"에 의존 elimate 할 수 있다는/더 라디오 버튼 나는 "다시 계산"기능은 예를 클릭 기반으로 시작할 수 있다는

1. 을 데 두 가지 문제가 없습니다 열, 내가 제거하고 싶습니다.

'예/아니오'값은 각각 '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&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 함수가 실행됩니다.

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