Jika Anda sudah pernah membaca artikel Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker yang membahas mengenai betapa mudahnya Anda sebagai Web Developer mengaktifkan control TextBox berdasarkan event atau nilai yang terpilih di control CheckBox, maka di artikel yang ini kita akan membahas bagaimana mudahnya Anda menampilkan atau menyembunyikan elemen TextBox tersebut daripada mengaktifkan atau menonaktifkannya.
Supaya lebih mudah, maka kita menggunakan contoh kasus yang sama dengan yang terdapat di artikel di atas tadi. Untuk itu, pastikan tipe control field AndaMhs sudah menggunakan tipe CheckBox melalui menu: Fields setup -> Edit Tag pada project PHPMaker yang bertalian.
Sedangkan untuk kode yang sebelumnya terdapat pada bagian Startup Script yang masing-masing berada di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script dan Client Scripts -> Table-Specific -> Edit Page -> Startup Script (jika ada), silahkan diganti masing-masing menjadi seperti yang di bawah ini:
$(document).ready(function() {
// Kondisi saat Form di-load
if($("input[name='x_AndaMhs[]']:checked").val()){
$('#r_NamaMhs').show();
} else {
$('#r_NamaMhs').hide();
}
// Kondisi saat CheckBox diklik
$('input:checkbox[name="x_AndaMhs\[\]"]').click(function() {
if (!$(this).is(':checked')) {
$('#x_NamaMhs').val('');
$('#r_NamaMhs').hide();
} else {
$('#r_NamaMhs').show();
$('#x_NamaMhs').focus();
}
});
});
PHPMaker akan menambahkan id untuk setiap baris record dengan menggunakan awalan (prefix) r_ yang diikuti dengan nama Field yang bertalian. Dalam contoh kode tadi, maka untuk menyembunyikan control Label beserta TextBox untuk field NamaMhs, maka kita menggunakan nama r_NamaMhs.
Hehehe…, luar biasa banyaknya kemudahan yang sudah disediakan oleh PHPMaker, ya? 🙂
kalau kondisi nya antar Checkbox bagaimana ya bang Masino ?
misal kan :
Field A = Checkbox
Field B = Checkbox
Field C = Textbox
hasil yang diharapkan, ketika “Field A” di Centang –> “Field B” otomatis juga ikut tercentang,
saya coba beberapa kali belum bisa, contoh kode seperti ini :
// Kondisi saat CheckBox diklik $('input:checkbox[name="x_filedA\[\]"]').click(function() { if (!$(this).is(':checked')) { $('#x_fieldB').val(''); } else { $(("'#x_filedB')':checked'"); $('#x_filedC').focus(); } }); });Coba cek ulang lagi kode Anda di atas. Sepertinya ada yang tidak konsisten di kode tersebut, apakah menggunakan filed atau field?
Tekan [F12] lalu cek di bagian Console apakah ada pesan error Javascript?