css - 保持选中复选框

Question

我是编程新手，我的第一个项目是将我的梦幻足球列表放到网上供朋友使用。www.davebloomquist.com/thelist

问题是，当人们在页面之间跳转时，我还没有学会如何检查复选框。

有人可以帮忙（像个白痴一样跟我说话——不仅告诉我代码，还告诉我把它放在哪里？）

太感谢了。

score 0 · Accepted Answer

更改页面后，输入字段（复选框）中的任何内容都将丢失，除非您在数据库、会话等中设置这些选择...

score 0 · Accepted Answer

将其保存在浏览器的本地存储中。可以从这里找到答案Remember checkbox with localstorage onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function saveToStorage(){
    var items = [];
    var checkboxes = document.getElementsByClassName('checkbox');
    var len = checkboxes.length;
    for(var i=0;i < len;i++){
        el = document.getElementsByClassName('checkbox')[i];
        if(el.checked == true){
            items.push({value:true});
        }else{
            items.push({value:false});
        }
    }
    var json_string = JSON.stringify(items);
    localStorage.setItem("checkbox_values", json_string);
}
function retrieveFromStorage(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var len = checkboxes.length;
    var items = JSON.parse(localStorage.getItem("checkbox_values"));
    for(var i=0;i < len;i++){
        el = document.getElementsByClassName('checkbox')[i];
        el.checked = items[i].value;
    }
}
</script>
</head>
<body onload="retrieveFromStorage()">
    <table class= "table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>PLAYER</th>
          <th>RD</th>
        </tr>
      </thead>
    <tbody>
      <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">1</span></td>
        <td>Aaron Rodgers</td>
        <td>1</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">2</span></td>
        <td>Drew Brees</td>
        <td>1-2</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">3</span></td>
        <td>Peyton Manning</td>
        <td>2-3</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">4</span></td>
        <td>Tom Brady</td>
        <td>2-3</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">5</span></td>
        <td>Matt Ryan</td>
        <td>3</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">6</span></td>
        <td>Cam Newton</td>
        <td>3-4</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">7</span></td>
        <td>Matt Stafford</td>
        <td>4-5</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">8</span></td>
        <td>Tony Romo</td>
        <td>4-5</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">9</span></td>
        <td>Andrew Luck</td>
        <td>4-5</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">10</span></td>
        <td>Russell Wilson</td>
        <td>5-6</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">11</span></td>
        <td>Colin Kaepernick</td>
        <td>5-6</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">12</span></td>
        <td>Robert Griffin III</td>
        <td>7</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">13</span></td>
        <td>Jay Cutler</td>
        <td>8-9</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">14</span></td>
        <td>Eli Manning</td>
        <td>8-9</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">15</span></td>
        <td>Ben Roethlisberger</td>
        <td>8-9</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">16</span></td>
        <td>Joe Flacco</td>
        <td>8-9</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">17</span></td>
        <td>Mike Vick</td>
        <td>9-10</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">18</span></td>
        <td>Andy Dalton</td>
        <td>9-10</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">19</span></td>
        <td>Matt Schaub</td>
        <td>9-10</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">20</span></td>
        <td>Phillip Rivers</td>
        <td>11-12</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">21</span></td>
        <td>Alex Smith</td>
        <td>12+</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">22</span></td>
        <td>Carson Palmer</td>
        <td>12+</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">23</span></td>
        <td>Brandon Weeden</td>
        <td>12+</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">24</span></td>
        <td>Josh Freeman</td>
        <td>12+</td>
    </tr>
       <tr>
        <td><span><input type="checkbox" class="checkbox" onclick="saveToStorage()">25</span></td>
        <td>Sam Bradford</td>
        <td>12+</td>
    </tr>
    </table>
</body>
</html>

获取所有复选框，然后将它们存储在一个对象中。
将对象解析为字符串，然后将其保存到本地存储。
从本地存储中获取保存的字符串。再次将其解析为对象。
循环对象并将每个值应用于复选框

score 0 · Accepted Answer

我认为当您跳转到不同的页面时，复选框不会保持选中状态，因为您正在做的正是“跳转到不同的页面”。

如果不同的页面是静态的，没有 ViewState 或 session 来保持复选框的状态，它们将恢复到页面加载时它们被编码的任何内容。

css - 保持选中复选框

3 回答 3

Related

Reference