Upon inspecting a page, I am implementing a script to check if a checkbox is selected. If not selected, the goal is to hide a specific div element. While troubleshooting this issue, I suspect the problem may be due to the lack of an inline element within the div; however, that approach is not viable in this scenario. Additionally, I have integrated cookies to remember user selections. The cookie function operates correctly, but the functionality to hide the div remains ineffective. Below is the relevant code snippet:
function setCookie(c_name,value,expiredays) {
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate)
}
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}
function checkCookie(){
document.getElementById('john').checked = getCookie('calOption1')==1? true : false;
document.getElementById('steve').checked = getCookie('calOption2')==1? true : false;
$(document).ready(function() {
if ($('#john').is(':checked')) {
$('.ms-acal-color2').css('display', 'block');
}else{
$('.ms-acal-color2').css('display', 'none');
}
});
$('#john').change(function() {
if (this.checked) { //if ($(this).is(':checked')) {
$('.ms-acal-color2').css('display', 'block');
} else {
$('.ms-acal-color2').css('display', 'none');
};
});
}
function set_check(){
setCookie('calOption1', document.getElementById('john').checked? 1 : 0, 100);
setCookie('calOption2', document.getElementById('steve').checked? 1 : 0, 100);
}
Additionally, refer to the provided HTML code:
<div style="float: left;">
<div id="myForm">
<input type="checkbox" onchange="set_check();" id="john"/>
<label>Show John</label>
<input type="checkbox" onchange="set_check();" id="steve"/>
<label>Show Steve</label>
</div>
</div>