Membaca Data Objek Bertipe Checkbox Dari HTML Ke Java Script

Read Time2 Minutes, 15 Seconds

Pada pertemuan kali ini akan dibahas mengenai bagaimana cara membaca objek bertipe checkbox dari html ke Java Script.

Objek bertipe checkbox dapat digunakan untuk memilih satu atau beberapa pilihan, dengan ketentuan setiap name objek harus berbeda.

  1. Buatlah design form masukan seperti gambar 4.1. Berikut
Gambar 4.1. Design Form Objek Checkbox

2. Data contoh

Tabel 4.1 Berikut merupakan contoh daftar harga dari tiap barang

 Tabel 4.1. Daftar Harga

NAMABARANG HARGA SATUAN
Handphone 1200000
Laptop 5000000
Komputer 3000000

3.Kode Program

Berikut adalah code program untuk membuat form seperti gambar 4.1 diatas

Nama File:checkbox.html

  1. <form name=form>
  2. <script>
  3. function proses()
  4. {
  5. var harga_hp=0,harga_laptop=0, harga_komputer=0;
  6. if(document.form.hp.checked) var harga_hp=1200000;
  7. if(document.form.laptop.checked) var harga_laptop=5000000;
  8. if(document.form.komputer.checked) var harga_komputer=3000000;
  9. //Jumlahkan seluruh variabel harga
  10. var total=harga_hp+harga_laptop+harga_komputer;
  11. //Tampilkan ke Layar hasilnya
  12. document.form.harga.value=total;
  13. }
  14. </script>
  15. <html>
  16. <center>
  17. Membaca Objek tipe Checkbox
  18. <hr>
  19. Pilih Barang
  20. <table>
  21. <tr><td colspan=2><hr>
  22. <tr><td><input type=checkbox name=hp>Handphone
  23. <tr><td><input type=checkbox name=laptop>Laptop
  24. <tr><td><input type=checkbox name=komputer>Komputer
  25. <tr><td colspan=2><hr>
  26. <tr><td>Harga<td><input type=text name=harga>
  27. <tr><td colspan=2><hr>
  28. </table>
  29. <hr>
  30. <input type=button value="Proses" onclick="proses()">
  31. <input type=reset value="Reset">
  32. </html>

4.Skenario Pengujian

Pengujian 1. Memilih Satu Barang

Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan dengan cara pengujian sebagai berikut:

  1. Pilih Salah satu Barang yang akan di beli, misalnya Hanphone
  2. Click Tombol Proses
  3. Selanjutnya pada Objek Harga akan ditampilkan Harga Hanphone sebesar 1200000
  4. Jika harga yang ditampilkan sesuai dengan tabel 4.1 diatas, maka program sudah sesuai dengan yang diharapkan
Gamabr 4.2. Output Memilih Handphone

Pengujian 2. Memilih lebih dari satu barang

  1. Pilih Beberapa barang yang akan dibeli misalnya, HandPhone dan Laptop
  2. Click Tomol Proses
  3. Selanjutnya pada Objek Harga akan ditampilkan harga sebesar 6200000, yang merupakan Hasil penjumlahan Harga Hanphone dan harga Laptop,
  4. Jika harga yang ditampilkan sesuai dengan tabel 4.1 diatas, maka program sudah sesuai dengan yang diharapkan
Gamabr 4.3. Output Memilih Handphone dan Laptop

Pengujian 3.Tidak Memilih Apapun

  1. Tidak Melakukan Pemilihan Barang
  2. Click Tomol Proses
  3. Selanjutnya pada Objek Harga akan ditampilkan harga sebesar 0, yang artinya tidak ada barang yang dipilih
Gambar 4.4. TIdak Memilih Barang Apapun

Latihan 4 Buat Program untuk menghitung Total Penjualan Barang dengan Design  Form Seperti berikut:

Dengan Input Nama Barang menggunakan objek tipe checkbox dan Jumlah Beli menggunakan objek text, sedangkan outputnya adalah berapa Total harga barang tersebut.

Gambar 4.5.Latihan Menggunakan Objek Checkbox dan Objek Text

Taryana Suryana M.Kom,
Teknik Informatika UNIKOM
taryanarx@email.unikom.ac.id

http://taryana.blog.unikom.ac.id

0 0
0 %
Happy
0 %
Sad
0 %
Excited
0 %
Angry
0 %
Surprise

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Close