Buscar

Aplikasi Menghitung Nilai dari Checkbox

Sore teman-teman, kali ini saya akan berbagi source code mengenai cara menghitung nilai dari checkbox.
Dalam hal ini, saya contohkan kasus menghitung harga yang harus di bayar seseorang setelah memesan suatu makanan. Kita menghitung nilai dari semua yang kita ceklis (checkbox aktif).
Gambarannya sebagai berikut :

Ini contoh scriptnya:
<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>
</head>
<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>

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 :)

1 comments:

Desa Lencoh

josss

Posting Komentar