Hallo sahabat Dumet School, yaaa bertemu lagi pada website kursuswebdesign. Dalam pembahasan artikel kali ini saya akan memberikan tutorial yang berhubungan dengan Checkbox atau Checklist. Biasanya dalam sebuah form checkbox tentunya sahabat tidak asing lagi bukan.Kenapa saya bilang tidak asing dengan sebuah form yang terdapat checkbox ini, karena dalam checkbox tentu sahabat akan memberikan pilihan atau checklis lebih dari satu,dua atau tiga maupun lebih. Agar tidak penasaran lagi mari dimulai saja cara membuat limit pada checkbox dengan JQuery.
Langkah pertama dalam membuat limit pada checkbox dengan jquery sahabat siapkan file html terlebih dahulu lalu ketikkan code dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membatasi Jumlah Checklist pada Checkbox </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <body> <h3>Maximal 2 yang dapat dipilih</h3> <input type="checkbox" name="paket" value="WebMaster" /> Web Master <br> <input type="checkbox" name="paket" value="WebDesign" /> Web Design <br> <input type="checkbox" name="paket" value="WebProgramming" /> Web Programming <br> <input type="checkbox" name="paket" value="DesignGraphis" /> Design Graphic <br> <input type="checkbox" name="paket" value="CFK" /> Coding For Kidz <br> </body> </html> |
Saya disini hanya memberikan contoh beberapa data yang akan dipilihnya sahabat, lalu tambahkan juga link library dari JQuery bisa dilihat ada dalam tag <head>.
Langkah selanjutnya ini yang penting yooo script yang dalam jquery seperti dibawah ini bisa sahabat ketikkan sisipkan scriptnya diletakkan didalam tag <head>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ // paket sesuai yang diambil dari name pada input $("input[name='paket']").change(function() { // variable untuk jumlah limit sesuaikan saja dengan keinginan var maxpil = 2; // variable untuk jumlah data yang dipilih atau di checklist // jika melebihi dari variable limit maka akan diberikan warning var jml = $("input[name='paket']:checked").length; if(jml > maxpil){ $(this).prop("checked",""); alert('Anda dapat memilih maksimal '+ maxpil +' Paket Kursus Supaya FOCUS!!'); } }); }); </script> |
Jika sudah diketikkan kedua code diatas ,sekarang coba buka di browser masing-masing apakah sudah tampil seperti gambar berikut:
Demikian pembahasan pada artikel ini tentang cara membuat limit pada checkbox dengan JQuery, semoga bermanfaat dan sampai jumpa dalam kesempatan lainnya.
terima kasih