2016-12-14 73 views
1
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text=""> 
     <thead> 
      <tr> 
       <th data-priority="1" id="th0">1</th> 
       <th data-priority="1" id="th1">2</th> 
       <th data-priority="1" id="th2">3</th> 
       <th data-priority="1" id="th3">4</th> 
       <th data-priority="1" id="th4">5</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
      </tr> 
    </tbody>  
</table> 

我做了一個表使用jquery mobile.okay!然後我想隱藏一些列,所以我點擊「列...」,現在我隱藏了列,但我如何使用localstorage存儲我的操作,當我刷新這個頁面時,並不是所有的列顯示。我知道那裏有'ui-checkbox-on'和'ui-checkbox-off'...。 THX!如何使用localstorage存儲jquery mobile的複選框狀態?

回答

0

來存儲數據:

localStorage.setItem("username", username); 

檢索數據:

var username = localStorage.getItem("username"); 

你的情況是這樣的:

HTML:

<input type="checkbox" onclick="toggle('.myClass', this)" > 
<div class="myClass"> 
    check 1. 
</div> 

<input type="checkbox" onclick="toggle('.myClass2', this)" > 
<div class="myClass2"> 
    check 2. 
</div> 

<input type="checkbox" onclick="toggle('.myClass3', this)" > 
<div class="myClass3"> 
    Check 3. 
</div> 

JS:

function toggle(className, obj) { 
    var $input = $(obj); 
    if ($input.prop('checked')) { 
     $(className).css("visibility", "hidden"); 
     console.log(className); 
     localStorage.setItem(className,'hidden') 
    } 
    else { 
     $(className).css("visibility", "visible"); 
     localStorage.setItem(className,'visible') 
    } 
} 

CSS:

input[type="checkbox"] { 
    clear: both; 
    float:left; 
} 

的jsfiddle:https://jsfiddle.net/dudu84/jxghvoqv/2/

+0

THx的傢伙!但我的問題是存儲複選框狀態 – WUSO01

+0

對不起。我用小提琴更新了答案。看看它是否有幫助:https://jsfiddle.net/dudu84/jxghvoqv/1/ – deChristo