GO Blog

Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQuery ini silahkan saja untuk di simak.

Pembuatan jQuery Checkboxes value.

Pertama silahkan buat css seperti di bawah ini:

// style untuk kotak elemen box
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
// css perbedaan warna latar
// warna latar box class red
.red{ background: #ff0000; }
// warna latar box class green
.green{ background: #00ff00; }
// warna latar box class blue
.blue{ background: #0000ff; }

CSS di atas hanya css sederhana yang saya gunakan untuk atau sebagai gambaran saja, jika anda merang ini terlalu biasa anda bisa membuat css dengan selera anda sendiri, misal seperti ini:

// style untuk kotak elemen box
.elemen-box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #900;
    border-radius:3px;
    color:#888;
    ... dst ...
}
// css perbedaan warna latar
// warna latar box class emoticon dan teks
.emoticon { background: #252525;color:#f1f1f1;... dst ... }
// warna latar box class konversi
.konversi { background: #292929;... dst ... }
// warna latar box class oot
.oot { background: #333;... dst ... }

Pastikan pada elemen utama yaitu class box berikan display: none; ini agar elemen box tidak muncul sebelum perintah di jalankan.

Sekarang untuk langkah kedua, kita buat HTML untuk elemen boxnya.

karena CSS yang saya gunakan adalah yang pertama, maka hasilnya adalah sebagai berikut:

// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Pada isi elemen box diatas, anda bisa menempatkaan elemen apa saja yang anda inginkan.

Sekarang kita buat input checkboxnya, lihat kode di bawah ini:

<div>
    // input checkbox untuk box merah
    <label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
    // input checkbox untuk box hijau
    <label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
    // input checkbox untuk box biru
    <label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

input checkbox di atas bisa di bungkus dengan elemen lain jika anda ingin, misalkan seperti berikut:

<div id='check-wrapper' class='check-wrapper'>
    // input checkbox untuk box merah
    <label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
    // input checkbox untuk box hijau
    <label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
    // input checkbox untuk box biru
    <label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

Penggabungan seluruh input checkbox dan elemen box:

<div>
    // input checkbox untuk box merah
    <label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
    // input checkbox untuk box hijau
    <label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
    // input checkbox untuk box biru
    <label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Selanjutnya, berikan syntax jQuery untuk menjalankan checkbox.

$(document).ready(function(){
   // Jika checkbox terdeteksi sudah dicek dengan klik
   $('input[type="checkbox"]').click(function(){
      // munculkan elemen manipulasi dengan kelas red 
      if($(this).attr("value")=="red"){// value dari input check box red
           $(".red").toggle();// box red muncul dengan efek toggle
      }
      // munculkan elemen manipulasi dengan kelas green
      if($(this).attr("value")=="green"){// value dari input check box green
           $(".green").toggle();// box green muncul dengan efek toggle
      }
      // munculkan elemen manipulasi dengan kelas blue
      if($(this).attr("value")=="blue"){// value dari input check box blue
           $(".blue").toggle();// box blue muncul dengan efek toggle
      }
  });
});

anda bisa melihat hasilnya di bawah ini:


Penerapan sekilas untuk HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide dengan Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".red").toggle();
            }
            if($(this).attr("value")=="green"){
                $(".green").toggle();
            }
            if($(this).attr("value")=="blue"){
                $(".blue").toggle();
            }
        });
    });
</script>
</head>
<body>

<div>
    <label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
    <label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
    <label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
<div class="red box">Anda memilih <strong>checkbox merah</strong> jadi saya muncul</div>
<div class="green box">Anda memilih <strong>checkbox hijau</strong> jadi saya muncul</div>
<div class="blue box">Anda memilih <strong>checkbox biru</strong> jadi saya muncul</div>

</body>
</html> 

Semoga bermanfaat...