SistemInformasiPHP.net

Kumpulan Sistem Informasi PHP, Tips & Trik HTML, CSS3, Javascript, HTML5, MYSQL, dan Informasi Programming Lainnya

Membuat Textfield Tampil Setelah Checklist Checkbox

0 komentar

Berikut adalah cara untuk menampilkan textbox/textfield ketika melakukan checklist pada checkbox. Contoh kasus. Misal ada beberapa option pekerjaan lainnya yang akan muncul ketika checkbox di klik.

(Checkbox) Petani
(Checkbox) Pegawai Negeri
(Checkbox) Lainnya

Ketika melakukan klik pada checkbox lainnya, Maka akan muncul textfield di bawah nya untuk menginputkan pekerjaan. Berikut adalah contoh source code nya :

HTML

<h3>Masukkan Pekerjaan Anda</h3>

<input type="checkbox" value="petani" id="petani" name="" class="pekerjaan" />
<label for="petani">Petani</label>
<br/>
<input type="checkbox" value="pegawai negeri sipil" id="pegawai negeri sipil" name="pekerjaan" class="pekerjaan" />
<label for="pegawai negeri sipil">Pegawai Negeri Sipil</label>
<br/>
<input type="checkbox" id="lainnya" name="pekerjaan" class="pekerjaan" />
<label for="lainnya">Lainnya</label>

<input id='lainnya-text' placeholder='Masukkan Pekerjaan' type='text'/

CSS 

#lainnya-text
{
display:none;

}

JAVASCRIPT

$(".pekerjaan").change(function () {
    if (this.checked) {
        //menampilkan a text box
        $("#lainnya-text").show();
    } else {
        //hide the text box
        $("#lainnya-text").hide();
    }

});
Share this article :

Posting Komentar

Dilarang berkomentar dengan menggunakan kata-kata kotor, tidak senonoh, & mengandung unsur pornografi. Komentar yang tidak mematuhi etika akan diblok & dihapus. Terimakasih

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Sistem Informasi PHP | Koleksi Source Code | Tutorial PHP - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger