Вычислить значение при checkbox check or uncheck

Question

Я пытаюсь получить промежуточный итог, когда пользователь нажимает на флажок. То, что я пытаюсь сделать, уменьшает необходимость в статическом коде и пытается сделать это более общим. Поэтому, если я добавлю еще одну строку, код просто вычислит строку.

Вот мой стол.

<table class="order-table"> 
           <thead> 
            <tr> 
             <th>Service</th> 
             <th>Description</th> 
             <th>Choose</th> 
             <th>Price</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr> 
             <td>Identification</td> 
             <td>Identify Companies</td> 
             <td> 
              <asp:CheckBox ID="cbHOAID" runat="server" CssClass="oClick" /> 
             </td> 
             <td>$30</td> 
            </tr> 
            <tr> 
             <td>Assesment</td> 
             <td>??</td> 
             <td> 
              <asp:CheckBox ID="cbAssesment" runat="server" CssClass="oClick" /> 
             </td> 
             <td>$25</td> 
            </tr> 
            <tr> 
             <td>Payoff </td> 
             <td>???</td> 
             <td> 
              <asp:CheckBox ID="cbPayoff" runat="server" CssClass="oClick" /> 
             </td> 
             <td>$25</td> 
            </tr> 
            <tr> 
             <td>Rent </td> 
             <td>???</td> 
             <td> 
              <asp:CheckBox ID="cbRentRestrictions" runat="server" CssClass="oClick" /> 
             </td> 
             <td>$10</td> 
            </tr> 
            <tr> 
             <td>CC</td> 
             <td>???</td> 
             <td> 
              <asp:CheckBox ID="cbCCR" runat="server" CssClass="oClick" /> 
             </td> 
             <td>$75</td> 
            </tr> 
            <tr> 
             <td></td> 
             <td></td> 
             <td>Subtotal:</td> 
             <td class="subTotal"></td> 
            </tr> 
           </tbody> 
          </table> 

Вот как отображается таблица на странице.

<table class="order-table"> 
           <thead> 
            <tr> 
             <th>Service</th> 
             <th>Description</th> 
             <th>Choose</th> 
             <th>Price</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr> 
             <td>HOA Identification</td> 
             <td>Identify HOA and Management Companies</td> 
             <td> 
              <span class="oClick"><input id="MainContent_Wizard1_cbHOAID" type="checkbox" name="ctl00$MainContent$Wizard1$cbHOAID" /></span> 
             </td> 
             <td>$30</td> 
            </tr> 
            <tr> 
             <td>Assesment</td> 
             <td>??</td> 
             <td> 
              <span class="oClick"><input id="MainContent_Wizard1_cbAssesment" type="checkbox" name="ctl00$MainContent$Wizard1$cbAssesment" /></span> 
             </td> 
             <td>$25</td> 
            </tr> 
            <tr> 
             <td>Payoff /Ledger</td> 
             <td>???</td> 
             <td> 
              <span class="oClick"><input id="MainContent_Wizard1_cbPayoff" type="checkbox" name="ctl00$MainContent$Wizard1$cbPayoff" /></span> 
             </td> 
             <td>$25</td> 
            </tr> 
            <tr> 
             <td>Rent Restrictions</td> 
             <td>???</td> 
             <td> 
              <span class="oClick"><input id="MainContent_Wizard1_cbRentRestrictions" type="checkbox" name="ctl00$MainContent$Wizard1$cbRentRestrictions" /></span> 
             </td> 
             <td>$10</td> 
            </tr> 
            <tr> 
             <td>CC&amp;R&#39;s</td> 
             <td>???</td> 
             <td> 
              <span class="oClick"><input id="MainContent_Wizard1_cbCCR" type="checkbox" name="ctl00$MainContent$Wizard1$cbCCR" /></span> 
             </td> 
             <td>$75</td> 
            </tr> 
            <tr> 
             <td></td> 
             <td></td> 
             <td>Subtotal:</td> 
             <td class="subTotal"></td> 
            </tr> 
           </tbody> 
          </table> 

И вот последний JQuery.

var Cart = { 

$triggerBtn: $(".oClick"), 
$checkBoxes: $(".oClick"), 
$subTotalEl: $(".subTotal"), 

calculate: function() { 
    var total = 0; 

    this.$triggerBtn.each(function() { 
     var $field = $(this); 
     var ischecked = $field.find("input[type='checkbox']").is(":checked"); 

     if (ischecked == true) { 
      var amount = $field.parent().next().text(); 
      var amountR = amount.replace(/\s+/g, "").replace(/\$/, ""); 
      var n2 = Number(amountR); 
      var sum = n2; 

      total += sum; 
     } 
    }); 

    total = "$" + total + " USD"; 

    return total; 
}, 

trigger: function() { 
    var self = this; 
    this.$triggerBtn.on("click", function (e) { 
     //e.preventDefault(); 
     var subtotal = self.calculate();    
     self.$subTotalEl.text(subtotal); 
    }); 
}, 

init: function() { 
    this.trigger(); 
    //this.$triggerBtn.trigger("click"); 

} 
}; 

$(function() { 
Cart.init(); 
}); 

Update

Обновленный Javascript, чтобы показать, что теперь вычисления правильно. Мне все равно нужно выяснить, как заставить его вычислять только по клику, и только если флажок установлен.

Обновление 2 Я, наконец, выяснил, как проверить флажки и только вычислить, когда установлен флажок.

Answer 1

Я, наконец, выяснил, как убедиться, что флажок установлен перед расчетом цены. Вот окончательный сценарий.

Если вы хотите увидеть его в действии, см. Его на JSFiddle.

var Cart = { 

$triggerBtn: $(".oClick"), 
$checkBoxes: $(".oClick"), 
$subTotalEl: $(".subTotal"), 

calculate: function() { 
    var total = 0; 

    this.$triggerBtn.each(function() { 
     var $field = $(this); 
     var ischecked = $field.find("input[type='checkbox']").is(":checked"); 

     if (ischecked == true) { 
      var amount = $field.parent().next().text(); 
      var amountR = amount.replace(/\s+/g, "").replace(/\$/, ""); 
      var n2 = Number(amountR); 
      var sum = n2; 

      total += sum; 
     } 
    }); 

    total = "$" + total + " USD"; 

    return total; 
}, 

trigger: function() { 
    var self = this; 
    this.$triggerBtn.on("click", function (e) { 
     //e.preventDefault(); 
     var subtotal = self.calculate();    
     self.$subTotalEl.text(subtotal); 
    }); 
}, 

init: function() { 
    this.trigger(); 
    //this.$triggerBtn.trigger("click"); 

} 
}; 

$(function() { 
Cart.init(); 
});