Pada hari minggu yang berbahagia ini kita akan melanjutkan cara menampilkan value yang ada di radio button dengan javascript, kemarin kita sudah belajar dengan menampilkan cekbox ya dengan javascript tetapi disini kita akan belajar cara menggunakannya dengan sebuah javascript, caranya hampir sama ya, jika kemarin saya menggunakan checkbox dengan bermaksud menambah harga menu makanan, tetapi disini saya hanya menampilkan namanya saja ya, jadi tidak ada penjumlahan disini ya. oke bagaimana cara membuatnya simak terus ya
Oke cara menampilkan value yang ada di radio button dengan javascript, adalah yang harus di perhatikan adalah ketika teman-teman membuat input type radio dimana name harus sama, karena apa, karena kita menggunakan input type radio, dimana input type radio di gunakan untuk memilih salah satu dari banyak list-list, jika semua sama bisa di pilih nanti tidak ada bedanya dong dengan input type checkbox bentul, oke silahkan teman-teman perhatikan kode berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<html> <head> <title>Cara Menampilkan value yang ada di radio button dengan javascript</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <style type="text/css"> strong{ font-weight: bold; font-size: 20px; color: purple; text-decoration: underline; } .error { color: red; } .pilih{ width: 145px; color: green; border: 1px solid cyan; padding: 5px; font-weight: bold; border-radius: 5px; } form{ width: 600px; margin: auto; } </style> <script type="text/javascript"> $(document).ready(function() { $('.error').hide(); $('.pilih').click(function(event){ var total=0; var hitung=$('input:checked').length; if(hitung==0) { $('p.tampilHasil').hide(); $('.error').show(); } else { $('.error').hide(); $('p.tampilHasil').show(); $('p.tampilHasil').html('Anda telah memilih Jasa Ekspedisi <strong> '+$('input:checked').attr("value")); } event.preventDefault(); }); }); </script> </head> <body> <form> <table cellspacing="0" border="1"> <tr> <th>pilih</th> <th>Jenis Ekspedisi</th> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="JNE"></td> <td>JNE</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="J&T"></td> <td>J&T</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="Pos Indonesia"></td> <td>Pos Indonesia</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="TIKI"></td> <td>TIKI</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="NINJA EKSPRES"></td> <td>Ninja Express</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="COD"></td> <td>COD</td> </tr> <tr> <td><input type="radio" name="Ekspedisi" value="GOSEND"></td> <td>GOSEND</td> </tr> </table> <p class="error">Pilih Jasa Ekspidsi Mana Yang kamu mau</p> <p class="tampilHasil"></p> <input class="pilih" type="submit" value="Pilih"> </form> </body> </html> |
Seperti biasa silahkan teman-teman copy struktur di atas ya, dan untuk kasus kali ini saya menggunakan jasa ekspedisi, jadi teman-teman harus memilih salah satu jasa ekspedisi mana yang ingin anda pilih, oke bagaimana hasilnya seperti ini ya:
seperti ini ya, jadi saya ketika saya memilih tiki maka jasa tiki lah yang akan tampil, oke saya rasa cukup samapi disini dulu belajar kita tentang cara menampilkan value yang ada di radio button dengan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.