Cara Memberikan Metode Wrap Style dengan :checkbox Selector

Jangan terus tangisi sesuatu yg telah berakhir. Sesuatu berakhir karena ada sesuatu yang lebih baik yang akan datang. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Memberikan Metode Wrap Style dengan :checkbox Selector.

Fungsi dari :checkbox selector ini sama hal nya seperti :radio selector yang pernah saya tutorial kan kepada teman-teman. :checkbox selector ini membuat CSS dengan memakai metode wrap. Dan :checkbox selector ini menyeleksi semua input type check box di satu website hanya dengan menggunakan satu fungsi.

:checkbox selector ini mempunyai struktur sebagai berikut:

$(":checkbox")

Langsung saja, berikut Cara Memberikan Metode Wrap Style dengan :checkbox Selector.

Pertama-tama, silahkan teman-teman siapkan file index.html nya.

Kemudian isi di bagian <head> library jquery nya,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Setelah itu, isi di bagian <body> tag-tag di bawah ini,

<body>

<form action="">
  Name: <input type="text" name="user"><br>
  I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
  I have a car: <input type="checkbox" name="vehicle" value="Car"><br>
  I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
  <input type="submit">
</form>

</body>

Dan yang terakhir, isi di bagian <head> lagi script :checkbox selector nya,

<script>
$(document).ready(function(){
    $(":checkbox").wrap("<span style='background-color:green'>");
});
</script>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Memberikan Metode Wrap Style dengan :checkbox Selector.

Semoga bermanfaat, terima kasih