Question

我是编程方面的新手，我的第一个项目是将我的奇幻足球名单放在网上给朋友。 www.davebloomquist.com/thelist

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

有人可以提供帮助吗（和我一样跟白痴说话 - 即不仅告诉我代码，还要放在哪里？）

非常感谢你。

Answer 1

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

Answer 2

将其保存在浏览器localstorage中。答案可以在这里找到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>

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

Answer 3

我认为当你跳到不同的页面时，复选框不会保持检查，因为你正在做什么，“跳到不同的页面”。

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

检查复选框

3 个答案: