ebsoftmedia.com

Content

Menjumlahkan Textbox lewat Checkbox yang di Checklist

Halo.. sahabat coding ebsoftmedia semuanya.. apa kabar.. bagaimana keadaan anda semua...??? semoga dalam keadaan sehat walafiat ya.. OK.. dalam artikel kali ini admin akan membahas bagaimana Cara Menjumlahkan Textbox secara otomatis saat Checkbox / pilihannya di Cheklist dengan Jquery.

Untuk lebih Jelasnya pada artikel ini  perhatikan Gambar berikut ini ya :

otomatis menjumlahkan textbox berdasarkan checkbox yang dipilih

Pada gambar diatas, kita dapat melihat bagaimana Cara Otomatis Menjumlahkan Textbox dengan Checklist Checkbox yang kita pilih.

Untuk codenya :

<html>
    <head>
        <title>Sum Html Textbox Values using jQuery/JavaScript</title>
        <style>
            body {
                font-family: sans-serif;
            }
            #summation {
                font-size: 18px;
                font-weight: bold;
                color:#174C68;
            }
            .txt {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }
        </style>
        <script src="jquery-1.3.2.min.js"></script>
    </head>
<script>
function hitung2() {
 if($('#ch1').not(':checked').length){
     var a = 0;
    }else{
      var a = $(".a2").val();
      a = isNaN(a) ? 0 : a
    }
 if($('#ch2').not(':checked').length){
     var b = 0;
    }else{
      var b = $(".b2").val();
      b = isNaN(b) ? 0 : b
    }
 if($('#ch3').not(':checked').length){
     var c = 0;
    }else{
      var c = $(".c2").val();
      c = isNaN(c) ? 0 : c
    }
    d = (parseFloat(a) + parseFloat(b) + parseFloat(c));
    $(".d2").val(d);
}
</script>
<p>
<h3>Ebsoftmedia.Com</h3>
<table border='1'>
<tr><th></th><th>Kode</th><th>Nominal</th></tr>
<tr>
<td><input type="checkbox" id='ch1' onclick="hitung2();"/></td>
<td>A </td>
<td><input class="a2" name="A" onkeyup="hitung2();" type="text" /></td>
</tr>
<tr>
<td><input type="checkbox" id='ch2' onclick="hitung2();"/></td>
<td>B</td>
<td><input class="b2" name="B" onkeyup="hitung2();" type="text"/></td>
</tr>
<tr>
<td><input type="checkbox" id='ch3' onclick="hitung2();"/></td>
<td>C</td>
<td><input class="c2" name="C" onkeyup="hitung2();" type="text" /></td>
</tr>
<tr>
<td colspan='2'>Total</td><td><input class="d2" name="D" type="text" disabled /></td>
</tr>
</table>