我是编程新手,我的第一个项目是将我的梦幻足球列表放到网上供朋友使用。www.davebloomquist.com/thelist
问题是,当人们在页面之间跳转时,我还没有学会如何检查复选框。
有人可以帮忙(像个白痴一样跟我说话——不仅告诉我代码,还告诉我把它放在哪里?)
太感谢了。
更改页面后,输入字段(复选框)中的任何内容都将丢失,除非您在数据库、会话等中设置这些选择...
将其保存在浏览器的本地存储中。可以从这里找到答案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>
我认为当您跳转到不同的页面时,复选框不会保持选中状态,因为您正在做的正是“跳转到不同的页面”。
如果不同的页面是静态的,没有 ViewState 或 session 来保持复选框的状态,它们将恢复到页面加载时它们被编码的任何内容。