Cara menghitung Nilai dari Checkbox dengan Javascript

Publish Date : 12-03-2021 , dibaca 15660 kali, Hari ini dibaca : 1 kali ,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

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

Mengambil Nilai dari Radio Button di Javascript
Previous Post

Membuat Form Input Dinamis
Next Post