Show Hide Textfield Menggunakan Checkbox Dengan Javascript

Ini adalah cara menampilkan atau menyembunyikan textField dengan meng-klik checkBox menggunakan javascript.

Pertama kita membuat file javascript mis: showHide.js

Kemudian disimpan pada folder js kita. Di dalamnya kita input code sbb:




$(document).ready(function(){

    $('#Dcl_tbo_sk').change(function(){ // dimana Dcl_tbo_sk adalah model & table (model_table)

        $('#hiddenDiv').toggle(); // or do $('#Dcl_nilaiblksk').parent().toggle();

    }); // sama juga, Dcl_nilaiblksk adalah model & table (model_table)

});



kita bisa menggunakan metode $(’#Dcl_nilaiblksk’).parent().toggle(); tapi lebih baik jika membuat id untuk div tag (contoh spt di atas #hiddenDiv)

Kemudian, di dalam view kita register javascript-nya (showHide.js):




<?php

/* Register javascript */

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/showHide.js');

?>



Masih pada view yang sama, kita tambahkan checkBox dan textField nya:




<?php  echo $form->checkBox($model, 'tbo_sk'); ?> // checkBox


<div id="hiddenDiv" style="display: none">

       <?php echo $form->textField($model, 'nilaiblksk'); ?> // textField

</div>



Selesai!