Pada artikel kali ini admin akan memberikan contoh script Cara Menghitung Jumlah Checkbox Yang Dicheck atau Dipilih , memang pada artikel sebelumnya admin sudah menulis artikel ini, namun kali ini script yang digunakan lebih simple dan mudah untuk kita pahami.. untuk artikel sebelumnya bisa dilihat disini :

• Cara menghitung Nilai dari Checkbox dengan Javascript
• Mengambil Nilai dari Checkbox dengan Javascript
• validasi mutlitple Checkbox
• Validasi Checkbox Array dengan Javascript

Cara Menghitung Jumlah Checkbox
Yang dipilih / dicheck dengan Javascript

untuk lebih jelasnya silahkan lihat pada gambar dibawah ini :

CODE HTML :

 <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

CODE JAVASCRIPT :

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
}

Cara Menghitung Jumlah Checkbox
Yang dipilih / dicheck dengan Jquery

untuk lebih jelasnya silahkan lihat pada gambar dibawah ini :

HTML CODE :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="boxes">
<label><input type="checkbox" id="enbapicks-1" name="ENBApicks[1]" value="1" data-exval="1"> 1 Golden State</label>
<label><input type="checkbox" id="enbapicks-5" name="ENBApicks[5]" value="1" data-exval="5"> 5 Memphis</label>
<label><input type="checkbox" id="enbapicks-7" name="ENBApicks[7]" value="1" data-exval="7"> 7 Who Knows</label>
  </div>
<div>Result: <span id="result"></span></div>

Javascript Code :

$(document).ready(function(){
//Set a handler to catch clicking the check box
  $("#boxes input[type='checkbox']").click(function(){
    var total=0;
    //lOOP THROUGH CHECKED
    $("#boxes input[type='checkbox']:checked").each(function(){
         //Update total
          total += parseInt($(this).data("exval"),10);
    });
    $("#result").text(total);
  });
  
});