0

チェックボックスがオンになっている場合はページをチェックしていますが、チェックされていない場合はdivを非表示にします。divにインライン要素がないことが原因かどうかはわかりませんが、とにかくそのメソッドを使用することはできません。また、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>
4

1 に答える 1

0

あなたのコードはめちゃくちゃです:)あなたはjqueryでjavascriptsintaxを結合するべきではありません、それらの1つだけを使用してください...

また、いくつかのことを混乱させています。関数内にドキュメント対応リスナーを追加し、他のイベントリスナーも追加しています...

コードをクリーンアップしました。結果をここで確認してください：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"/>
于 2013-02-21T02:44:50.290 に答える