contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Cara menghitung Nilai dari Checkbox dengan Javascript

Posted in Javascript Jquery Life at 14 April 2016 With 1 Comments

Pada artikel kali ini admin share aplikasi menghitung nilai dari checkbox dengan menggunakan javascript, dengan menggunakan javascript kita bisa menjumlahkan nilai yang ada di textbox tanpa harus merefresh terlebih dahulu, dimana kita ketahui javascript merupakan client scrpting ,, haha.. maksudnya script yang berjalan disisi client,,  server tentu tidak terbebani dan tidak terhubung,,

Berikut contoh Menghitung nilai di checkbox otomatis dengan javascript tanpa menggunakan tombol submit / sejenisnya

▼ Download Source Code Dibawah Ini ▼


menghitung nilai di checkbox otomatis dengan javascript

langsung kita masuk ke Script nya :

Cara Menjumlahkan nilai di checkbox otomatis dengan Javascript

copy code dibawah ini simpan dengan nama index.html

<!doctype HTML>
<head>
<title>Menghitung nilai di checbox otomatis</title>
</head>
<script language="JavaScript">
function checkChoice(whichbox){
 with (whichbox.form){
  if (whichbox.checked == false)
   hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);
  else
   hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value);
   return(formatCurrency(hiddentotal.value));
 }
}
function formatCurrency(num){
 num = num.toString().replace(/\$|\,/g,'');
 if(isNaN(num)) num = "0";
  cents = Math.floor((num*100+0.5)%100);
  num = Math.floor((num*100+0.5)/100).toString();
 if(cents < 10) cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  num = num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
  return ("Rp. " + num + "," + cents);
}
</script>
<body>

<center>
<form name=myform><table width="335" border="0">
  <tr>
    <td colspan="6" align="center"><strong>Daftar Menu & Harga</strong></td>
    </tr>
  <tr>
    <td>Makanan</td>
    <td> </td>
    <td align="right"> </td>
    <td align="center"> </td>
  </tr>
  <tr>
    <td width="156">Nasi</td>
    <td width="29">Rp. </td>
    <td width="99" align="right">5.000</td>
    <td width="33" align="center"><input type=checkbox name=nasi value="5000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Ikan Gurame Bakar</td>
    <td>Rp.</td>
    <td align="right">60.000</td>
    <td align="center"><input type=checkbox name=ikan value="60000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Cumi Asam Manis</td>
    <td>Rp.</td>
    <td align="right">45.000</td>
    <td align="center"><input type=checkbox name=cumi value="45000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Tumis Kangkung</td>
    <td>Rp.</td>
    <td align="right">15.000</td>
    <td align="center"><input type=checkbox name=kangkung value="15000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Tahu Goreng</td>
    <td>Rp.</td>
    <td align="right">5.000</td>
    <td align="center"><input type=checkbox name=tahu value="5000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Ayam Goreng</td>
    <td>Rp.</td>
    <td align="right">12.000</td>
    <td align="center"><input type=checkbox name=ayam value="12000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>

    <td colspan="4"> </td>
  </tr>
  <tr>
    <td colspan="4">Minuman</td>
  </tr>
  <tr>
    <td>Teh Manis</td>
    <td>Rp.</td>
    <td align="right">4.000</td>
    <td align="center"><input type=checkbox name=tehmanis value="4000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Jus Mangga</td>
    <td>Rp.</td>
    <td align="right">8.000</td>
    <td align="center"><input type=checkbox name=jusmangga value="8000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Jus Alpukat</td>
    <td>Rp.</td>
    <td align="right">8.000</td>
    <td align="center"><input type=checkbox name=jusalpukat value="8000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Lemon Tea</td>
    <td>Rp.</td>
    <td align="right">5.000</td>
    <td align="center"><input type=checkbox name=lemontea value="5000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td>Milk Shake</td>
    <td>Rp.</td>
    <td align="right">9.000</td>
    <td align="center"><input type=checkbox name=milkshake value="9000" onClick="this.form.total.value=checkChoice(this);"></td>
  </tr>
  <tr>
    <td colspan="4" align="right">Total :
      <input type="text" name="total" value=""  readonly>
      <input type=hidden name=hiddentotal value=0></td>
  </tr>
</table>
</form>
</center>
</body>
</html>

Function.eval() digunakan untuk mengevaluasi apa saja yang direpresentasikan di dalam parameter expression.
Sintaks:
eval(expression)
Di mana expression adalah ekspresi valid yang akan diperlakukan sebagai kode JavaScript oleh interpreter. Jika nilai parameter expression bukanlah string, maka itu yang akan dikembalikan. Sebagai contoh, eval(5000) akan mengembalikan nilai 5. Jika nilai parameter expression adalah string, interpreter mencoba untuk menginterpretasikan string tersebut seolah-olah adalah kode JavaScript.
Selamat mencoba, semoga bermanfaat :)

demo download

Artikel Terkait

Diskusi

1 Komentar


hana   Pada : 2016-05-17 18:11:10
saya mau nilai totalnya tersembunyi. lalu menambahkan button dan setelah button diklik nilainya baru muncul