私はプログラミングの初心者で、最初のプロジェクトは友人のためにファンタジー フットボールのリストをオンラインにすることでした。www.davebloomquist.com/thelist
問題は、人々がページ間をジャンプするときにチェックボックスをオンにしておく方法を学んでいないことです。
誰か助けてくれませんか (そして馬鹿みたいに話しかけてください。コードだけでなく、どこに配置すればよいか教えてくれませんか?)
どうもありがとう。
ページを変更すると、DB、セッションなどでそれらの選択を設定しない限り、入力フィールド (チェックボックス) に入力されたものはすべて失われます...
ブラウザのローカル ストレージに保存します。答えはここから見つけることができます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 またはセッションがない場合、ページが読み込まれるときにコード化された状態に戻ります。