ページ上のjavascriptを実行してフォームを非表示にする

Question

ユーザーがチェックボックスをクリックすると、次のjavascriptを使用してフォームを非表示にしています。

ページの読み込み時に実行するコードを取得しようとしていますが、これを行う方法を理解できません。誰も助けることができますか？

$('#no_cage').change(function(){ 
    if (this.checked) { 
    $('#cage_details').fadeOut(); 
    } else { 
    $('#cage_details').fadeIn(); 
    }     
}); 

HTML：

<input name="no_cage" id="no_cage" type="checkbox" value="1" <?php echo $checked; ?>><label for="no_cage">Check if not required</label> 

<div id="cage_details"> 

<form> 

... 

</form> 

</div> 

ユーザーがチェックボックスをクリックしたときにこれが正常に動作します。しかし、それはDBから引っ張って、チェックボックスがすでにページの読み込みで選択されていません。

Answer 1

このコードをドキュメントレディハンドラ内に追加するだけです。それは...ちょうどあなたがそれを宣言し、イベントをトリガし、代わりに...それは実際には変更せずに

$('#no_cage').trigger("change"); 

を変更イベントハンドラをトリガするイベントハンドラを追加します

$('#no_cage').change(function(){ 
    if (this.checked) { 
     $('#cage_details').fadeOut(); 
    } 
    else { 
     $('#cage_details').fadeIn(); 
    }     
}).trigger("change"); 

とドキュメントがロードされたときにフォームを正しい状態に設定するために、すぐにそれを実行します。

Answer 2

チェックされたプロパティを変更することも、変更イベントをトリガすることもできます。

$(function() { 
 

 
    $('#no_cage').change(function() { 
 
    if (this.checked) { 
 
     $('#cage_details').fadeOut(); 
 
    } else { 
 
     $('#cage_details').fadeIn(); 
 
    } 
 
    }); 
 

 
    // Change the checked property 
 
    $('#no_cage').prop('checked', true); 
 

 
    // OR trigger the change event 
 
    // $('#no_cage').trigger('change'); 
 

 
});