チェックボックスの値に基づいてDivを表示または非表示にする

Question

チェックボックスの値に基づいてdivを表示したいとします。私は以下を試した。

$(document).ready(function() { 
    $('#parent').change(function() { 
    if (this.checked) { 
    $('#child').css('display', 'block'); 
} 
    else { 
    $('#child').css('display', 'none'); 
} 
}); 

}）;

#parentのチェックボックスをオンにすると機能します。しかし問題は、チェックボックスがフォームにあることです。次回は、ページを更新するとき、チェックボックスがオンになっていても、それはまだ表示されません。

このチェックボックスをオンにすると、チェックボックスがオンになっているかどうかをチェックします。

おかげ

Answer 1

トリガまた、あなたがtoggle()メソッドを使用してコードを減らすことができchange()またはtrigger('change')方法

$(document).ready(function() { 
    $('#parent').change(function() { 
    if (this.checked) { 
     $('#child').css('display', 'block'); 
    } else { 
     $('#child').css('display', 'none'); 
    } 
    }).change(); 
}); 

---

を使用して変更イベント。

$(document).ready(function() { 
    $('#parent').change(function() { 
    $('#child').toggle(this.checked); 
    }).change(); 
}); 

Answer 2

これを試してみてください。

$(document).ready(function() { 
    $('#parent').change(function() { 
    if($(this). prop("checked") == true){ 
     $('#child').css('display', 'block'); 
    } 
    else { 
     $('#child').css('display', 'none'); 
    } 
});