Question

如果选中了复选框，我正在检查页面，如果不是，我想隐藏div。我不确定是否是因为我的div没有内联元素，但无论如何我都不能使用该方法。我还使用cookie来记住为每个用户选择的选择。 Cookie部分工作正常，它只是隐藏了无效的div。这是代码：

  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);
}

编辑：这是html代码

<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>

Answer 1

你的代码很乱:)你不应该用jquery加入javascript sintax，只使用其中一个......

你也混淆了一些事情，你在函数中添加了文档就绪的监听器，以及其他事件监听器......

我清理了你的代码，看看结果：http://jsfiddle.net/Hezrm/
要查看它使用Cookie：http://jsfiddle.net/promatik/Hezrm/show

以下是 Javascript ：

中的更改

// In the Document Ready listener you are going to check cookies and
// hide "everyone" that is not checked
$(document).ready(function() {
    checkCookie();
    $(".person:not(:checked)").next().hide();
});

// This is a change eventlistener that will hide or show people at runtime
$('#john, #steve').change(function() {
    if( $(this).is(':checked') ) $(this).next().show();
    else $(this).next().hide();
    set_check(); // And save changes to cookies
}); 

function checkCookie(){
    $('#john').attr("checked", getCookie('calOption1') == 1 ? true : false);
    $('#steve').attr("checked", getCookie('calOption2') == 1 ? true : false);
}

function set_check(){
    setCookie('calOption1', $('#john').is(':checked')? 1 : 0, 100);
    setCookie('calOption2', $('#steve').is(':checked')? 1 : 0, 100);
}

我还添加了一个类.person，以便更容易隐藏或显示复选框：

<input type="checkbox" id="john" class="person"/>

javascript检查是否未选中复选框而不隐藏div onload

1 个答案: