Membuat Check All pada Checkbox Menggunakan Jquery

Hallo teman-teman, pada kesempatan kali ini saya akan membahas tentang cara Membuat check all pada checkbox menggunakan jquery.

jadi fungsi check all pada checkbox ini adalah jika kita dihadapkan dengan banyak pilihan dan kita menyukai atau memilih semuanya maka dengan meklik 1x kita dapat memilih semua pilihan yang kita inginkan atau kita pilih.

Oke untuk lebih jelasnya langsung saja kita mulai praktek.

Pertama-tama ketik script htmlnya dibawah ini :

<h4>Pilih Genre Musik Kesukaan Anda : </h4> 
      <div id="centang">
        <input type="checkbox" name="genre1"> Rock<br> 
        <input type="checkbox" name="genre2"> Jazz<br> 
        <input type="checkbox" name="genre3"> Pop<br> 
        <input type="checkbox" name="genre4"> Hardcore<br> 
        <input type="checkbox" name="genre5"> Alternative<br>
        <hr width="120" align="left"> 
        <input type="checkbox" id="semua">Semua Suka<br>
      </div>

Jika sudah silahkan kalian simpan dengan nama index.html

Lalu masukan script javascript dibawah ini kedalam file html nya dan di letakan di antara tag head.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function() { 
      // ketika checkbox dengan id semua diklik,  
      // maka semua checkbox akan tercentang. 
      $('#semua').click(function(){ 
         $(this).parents('#centang:eq(0)').
         find(':checkbox').attr('checked', this.checked); 
      });
    });   
  </script>

Jika sudah silahkan kalian simpan dan coba kalian jalankan/run dibrowser yang kalian gunakan.

Nah maka hasilnya akan seperti gambar dibawah ini :

Oke jika hasilnya seperti gambar diatas maka kalian telah berhasil membuat check all pada checkbox menggunakan jquery.

Sekian dan terimakasih pembahasan kali ini tentang cara membuat check all pada checkbox menggunakan jquery.

Semoga bermanfaat dan sampai bertemu di pembahasan selanjutnya.

The post Membuat Check All pada Checkbox Menggunakan Jquery appeared first on Kursus Website Terbaik.