如何讓我的結果在javascript中正確添加

Question

我有一個小腳本，用於檢查選定的框並將其展示出來。
有些箱子值得兩個值得一個。
我可以讓他們加起來，但只有當我選擇兩個指針之一，反之亦然。
任何幫助將不勝感激。

我是JavaScript新手，請隨身攜帶。

的Html

<div class="checkbox pmmargin"> 
    <label><input type="checkbox" value="" class="one">Some blah blah text</label> 
</div> 
<div class="checkbox pmmargin"> 
    <label><input type="checkbox" value="" class="two">Text</label> 
</div> 
<div class="checkbox pmmargin"> 
    <label><input type="checkbox" value="" class="one">text</label> 
</div> 

JavaScript的

$(".two").change(function() { 
    var classes = $("input[type='checkbox'].two:checked").map(function() { 
     return this.className; 
    }).get().length * 2; 
      document.getElementById("program_management2").innerHTML = " Score:" + " " + Math.floor(classes) ; 

    $(".one").change(function() { 
    var classes2 = $("input[type='checkbox'].one:checked").map(function() { 
     return this.className; 
    }).get().length; 

      document.getElementById("program_management").innerHTML = " Score:" + " " + Math.floor(classes2 + classes) ; 

}); 
    }); 

Answer 1

如果你只想增加每個選中的複選框的值，你應該使用value屬性。

由於該值是一個字符串，因此必須將其解析爲一個整數以便在添加中使用它。

$("input[type='checkbox']").click(function(){ 
 
    var result = 0; 
 
     $("input[type='checkbox']:checked").each(function(){ 
 
      result += parseInt($(this).val()); 
 
    }); 
 
     $("#total").html(result); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
    <input type="checkbox" value="1">This box value is 1<br> 
 
    <input type="checkbox" value="2">This box value is 2<br> 
 
    <input type="checkbox" value="5">This box value is 5<br> 
 
    <br> 
 
    <br> 
 
    The checked total is: <span id="total">0</span>

編輯

我添加了一個 「檢查類」 計數。

$("input[type='checkbox']").click(function(){ 
 
    var result = 0; 
 
    var classOne = 0; 
 
    var classTwo = 0; 
 

 
    $("input[type='checkbox']:checked").each(function(){ 
 
     result += parseInt($(this).val()); 
 
     if($(this).hasClass("one")){ 
 
      classOne++; 
 
     } 
 
     if($(this).hasClass("two")){ 
 
      classTwo++; 
 
     } 
 
     $("#totalOne").html(classOne); 
 
     $("#totalTwo").html(classTwo); 
 

 
    }); 
 
    $("#total").html(result); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="checkbox" value="1" class="one">This box value is 1<br> 
 
<input type="checkbox" value="2" class="two">This box value is 2<br> 
 
<input type="checkbox" value="1" class="one">This box value is 1<br> 
 
<input type="checkbox" value="2" class="two">This box value is 2<br> 
 
<input type="checkbox" value="2" class="two">This box value is 2<br> 
 
<br> 
 
<br> 
 
The checked total value is: <span id="total">0</span><br> 
 
Class "one" checked total : <span id="totalOne">0</span><br> 
 
Class "two" checked total : <span id="totalTwo">0</span><br>