Cara Menghitung Total Harga dengan Menggunakan Jquery

Jadi pada kesempatan kali ini kita akan belajar cara menghitung total harga dengan menggunakan jquery kasusnya adalah dimana saya membuat sebuah daftar menu makanan dan di setiap daftar menu makanan itu ada sebuah list harganya, jadi ketika saya memlih menu makanan satu, jumlahnya berapa dan saya pilih lagi menu makanan satu di jumlah menu makanan kedua, jika saya ingin menambah lagi tinggal pilih dan menu satu, menu dua pun ikut di total begitupun selanjutnya ya. oke bagaimana cara membuatnya simak terus ya teman-teman.

Oke untuk cara menghitung total harga dengan menggunakan jquery, saya menggunakan jquery ya teman-teman bukan PHP, walaupun di dalam PHP pun bisa tetapi disini saya akan mencobanya menggunakan jquery, caranya hampir sama seperti PHP hanya saja kita juga membutuhkan sintaks-sintaks yang ada pada juqery, oke kira-kira teman-teman disini apakah ada yang tau kita akan menggunakan apa, ya betul kondisi ya, jadi nanti kita cek disebuah kondisinya. Kondisi apa yang akan saya gunakan, kondisi yang saya gunakan adalah, sebuah if else ya teman-teman. oke dari pada menunggu lama, silahkan teman-teman perhatikan struktur kode jquery berikut ini:

<html>
  <head>
    <title>Cara menghitung total harga dengan menggunakan jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>
	<style type="text/css">
      .kotak_info { margin-top: 15px; }
      .error { color: red; }
      table{
        border:1px solid blue;
        margin-left: 20px;
        width: 460px
      }
      .container{
        width: 500px;margin: auto;
        border:2px dashed red;
      }
      h1{
        text-align: center;
      }
    </style>
	<script type="text/javascript">
      $(document).ready(function() {
        $('.error').hide();
        $('.submit').click(function(event){
          event.preventDefault();

          var hitung=0;
          var total=0;

          $('form').find(':checkbox').each(function(){
            if($(this).is(':checked'))
            {
              hitung++;
              total=total+parseInt($(this).val());
            }
          });
          if(hitung==0)
          {
            $('p.hasil').hide();
            $('.error').show();
          }
          else
            {
              $('.error').hide();
              $('p.hasil').show();
              $('p.hasil').text('Total Rp. '+total);
            }
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
    <h1>Cara menghitung total harga dengan menggunakan jquery</h1>
    <form>
    <table border="1" cellspacing="0">
      <tr>
        <th>No</th>
        <th>Pilih</th>
        <th>Menu Ayam</th>
      </tr>
      <tr>
        <th>1</th>
        <td><input type="checkbox" id="Ayam_goreng" name="Ayam_goreng" value=15000 class="kotak_info"></td>
        <td>Ayam goreng Rp.15000</td>
      </tr>
      <tr>
        <th>2</th>
        <td><input type="checkbox" id="Ayam_sambal_tomat" name="Ayam_sambal_tomat" value=17000 class="kotak_info"></td>
        <td>Ayam sambal tomat Rp.17000</td>
      </tr>
      <tr>
        <th>3</th>
        <td><input type="checkbox" id="" name="" value=16000 class="kotak_info"></td>
        <td>Ayam bakar Rp.16000</td>
      </tr>
      <tr>
        <th>4</th>
        <td><input type="checkbox" id="" name="" value=15000 class="kotak_info"></td>
        <td>Ayam Penyet Rp.15000</td>
      </tr>
      <tr>
        <th>5</th>
        <td><input type="checkbox" id="" name="" value=13000 class="kotak_info"></td>
        <td>Ayam Ulek Rp.13000</td>
      </tr>
      <tr>
        <th>6</th>
        <td><input type="checkbox" id="" name="" value=25000 class="kotak_info"></td>
        <td>Ayam Dada Mentok Rp.25000</td>
      </tr>
      <tr>
        <th>7</th>
        <td><input type="checkbox" id="" name="" value=17000 class="kotak_info"></td>
        <td>Paha Ayam Cinere Rp.17000</td>
      </tr>
      <tr>
        <th>8</th>
        <td><input type="checkbox" id="" name="" value=65000 class="kotak_info"></td>
        <td>Ayam Sambal Terasi Rp.65000</td>
      </tr>
      <tr>
        <th>9</th>
        <td><input type="checkbox" id="" name="" value=25000 class="kotak_info"></td>
        <td>Ayam Tumis balado Rp.25000</td>
      </tr>
      <tr>
        <th>10</th>
        <td><input type="checkbox" id="" name="" value=45000 class="kotak_info"></td>
        <td>Ayam Kampung Rp.45000</td>
      </tr>
      <tr>
        <th>11</th>
        <td><input type="checkbox" id="" name="" value=75000 class="kotak_info"></td>
        <td>Ayam Jago Rp.75000</td>
      </tr>
    </table>

    <p class="error">Pilih sedikitnya satu jenis makanan ya. </p>
    <strong><p class="hasil"></p></strong>
    <input class="submit" type="submit" value="Total Bang">      
    </form>
    </div>
  </body>
</html>

Cukup panjang ya, tetapi tidak masalah silahkan teman-teman perhatikan kode jquerynya saja ya, oke sekarang kita lihat hasilnya:

nah bisa di lihat ya, ketika saya menceklis makanan paha ayam dan ayam sambal, maka yang terjadi adalah saya menjumlahkan kedua makanan tersebut, yaitu sekitar 82000, bagaimana, cukup bermanfaat ya, oke cukup sampai disini dulu belajar kita tentang cara menghitung total harga dengan menggunakan jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.