根據複選框值顯示或隱藏Div

Question

我想根據複選框值顯示div。我試過以下

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

}）;

現在它的工作，如果我檢查#parent複選框。但問題是複選框是在一個窗體中。下次刷新頁面時，即使複選框被選中，它仍然不顯示任何內容。

如何選中此複選框被選中或顯示無顯示。

感謝

Answer 1

觸發使用change()或trigger('change')方法

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

---

還可以減少使用toggle()方法的代碼更改事件。

$(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'); 
    } 
});