チェックボックスのJqueryトリガーイベント

Question

私はclickのjqueryスクリプトを書いた一連のチェックボックスを持っています。ユーザーがチェックボックスをクリックすると、別の一連のチェックボックスが開き、そのチェックボックスがオンになります。今私の問題は、ユーザーがチェックボックスをチェックして次のページに移動し、何らかの理由でチェックボックスのページに戻ったときです。それから私は彼/彼女が開くことを確認したすべてのボックスを持っている必要があります。 DOM負荷

$(document).ready(function(){ 
    if($('.main').is(':checked')){ 
     $(this).trigger('click'); 
    }else{ 
     //do nothing 
    } 

    $('.main').click(function(){ 
     if($('.main').is(':checked')){ 
     var val = $(this).attr('alt'); 
     $('#'+val).show(); 
    }else{ 
     var val = $(this).attr('alt'); 
     $('#'+val).hide(); 
    } 
    }); 
}); 

あなたは上記を参照ように、私は、チェックボックスのテストを書いています。 Mainはチェックボックスクラスです。それをクリックすると、別の一連のチェックボックスが開きます。今度は、チェックボックスを使用してページに再びアクセスするときに、チェックボックスで自動的にこれを行うようにします。

Answer 1

使用セッションやクッキー、それに応じてそれらをチェックし、あなたが戻ってくるし、次のコードを使用します。

を

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('.main').each(function(){ 
     if($(this).is(':checked')){ 
     var val = $(this).attr('alt'); 
     $('#'+val).show(); 
     }else{ 
     var val = $(this).attr('alt'); 
     $('#'+val).hide(); 
     } 
    }); 


    if($('.main').is(':checked')){ 
     $(this).trigger('click'); 
    }else{ 
     //do nothing 
    } 

    $('.main').click(function(){ 
     if($('.main').is(':checked')){ 
     var val = $(this).attr('alt'); 
     $('#'+val).show(); 
    }else{ 
     var val = $(this).attr('alt'); 
     $('#'+val).hide(); 
    } 
    }); 
}); 
</script> 

私はちょうどなどがチェックされていたもののボックスを追跡するために、いくつかのJSONやローカルストレージを使用すると思い

Answer 2

通常、ユーザーがすでに完了しているフォームを補充して補充すると決めたブラウザです。設定は簡単に変更でき、ユーザーごとに異なる可能性があるため、ブラウザに頼るべきではありません。

代わりに、クリックされたチェックボックスをcookie/localstorageに保存することを考えたり、AJAX経由でサーバーに送信したりすることもできます。その後、ユーザーがページを開くと、Cookieの内容を確認したり、AJAX経由で保存されたクリックされた要素を取得したりできます。その後、適切な要素のクリックを再作成できます。

jQueryを使ってクッキーデータを扱うため、この関連記事清算する - .mainクラスのチェックボックスの値を保存するためのHow do I set/unset cookie with jQuery?

Answer 3

$(document).ready(function() { 
    if (localStorage.getItem('boxes')) { 
     var boxes = JSON.parse(localStorage.getItem('boxes')); 
     $.each(boxes, function (idx, val) { 
      var box = $('.main').eq(idx); 
      box.prop('checked', val); 
      $('#' + box.attr('alt')).toggle(val); 
     }); 
    } 

    $('.main').on('change', function() { 
     var val = $(this).attr('alt'), 
      boxes = {}; 

     $.each($('.main'), function (i, el) { 
      boxes[$(el).index('.main')] = el.checked; 
     }); 

     $('#' + val).toggle(this.checked); 
     localStorage.setItem('boxes', JSON.stringify(boxes)); 
    }); 
}); 

DEMONSTRATION