Membuat Check All pada Checkbox Menggunakan Jquery

Hallo teman-teman, di kesempatan kali ini saya akan membahas mengenai cara Merancang check all di checkbox menggunakan jquery.

Jadi manfaat check all di checkbox ini yaitu bila kita dihadapkan dengan banyak alternatif dan kita menyukai atau memilih semuanya karenanya dengan klik 1x kita dapat memilih seluruh alternatif yang kita inginkan atau kita pilih.

Oke bagi lebih jelasnya seketika saja kita mulai praktek.

Pertama-tama-tama ketik script htmlnya dibawah ini :

<h4>Pilih Genre Musik Kesukaan Sahabat : </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=seluruh>Segala Suka<br>
      </div>

Seandainya telah 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 seluruh diklik,  
      // karenanya seluruh checkbox akan tercentang. 
      $('#seluruh').click(function(){ 
         $(this).parents('#centang:eq(0)').
         find(':checkbox').attr('checked', this.checked); 
      });
    });   
  </script>

Seandainya telah silahkan kalian simpan dan coba kalian jalankan/run dibrowser yang kalian gunakan.

Nah karenanya hasilnya akan seperti gambar di bawah ini :

Oke bila hasilnya seperti gambar diatas karenanya kalian telah berhasil merancang check all di checkbox menggunakan jquery.

Sekianlah dan terimakasih pembahasan kali ini mengenai cara merancang check all di checkbox menggunakan jquery.

Semoga bermanfaat dan hingga bertemu di pembahasan berikutnya.

Sumber https://kursuswebsite.org