I明確にしようとします:私は2つのhtml、私は、フォームや他のチェックボックスを持っているものを持って、私はそれがフォームのHTMLに置かれている値に依存していることを希望(私は知りませんそれはそのようにそれを呼び出すために右だ場合)、いくつかのチェックボックスがチェック等を表示されます。
例えば、
私は「デザート」を選択して、私は、私はチェックボックスがあり、他のページに移動します「GO」ボタンをクリックすると「デザート」のチェックボックスがチェックされて表示されます。
私は多くの事が、ハズレを実行しようとしました。どうもありがとうございます!
HTML 1:
<table id="CategoriesTable">
<tr>
<td>
<form id="categoriesForm" method="POST">
<input type="text" id = "categoriesList" list="categorieslist" name="categories-scroll" placeholder="Type a category.." style="border-radius: 0.5rem;border-width: 0.5px;">
<datalist id="categoriesDatalist">
<option data-value="Desserts"></option>
<option data-value="Starters"></option>
<option data-value="Main"></option>
<option data-value="Soups"></option>
<option data-value="Salad"></option>
<option data-value="Burgers"></option>
</datalist>
</form>
</td>
<td>
<button id ="go-button" class="btn btn-primary" data-dismiss="modal">
<h6 class="text">Go!</h6>
<img class="img-fluid rounded" src="../images/icons/pizza-go.png" alt="" width="50%" style="height: 50px; width: 50px;">
</button>
</td>
</tr>
</table>
HTML 2:
<h5 class="card-header">Categories</h5>
<div class="containersearch">
<ul class="ks-cboxtags">
<li><input type="checkbox" id="checkbox9" value="Desserts"><label for="checkbox9">Desserts</label></li>
<li><input type="checkbox" id="checkbox10" value="Starters" ><label for="checkbox10">Starters</label></li>
<li><input type="checkbox" id="checkbox11" value="Main" ><label for="checkbox11">Main</label></li>
<li><input type="checkbox" id="checkbox12" value="Soups"><label for="checkbox12">Soups</label></li>
<li><input type="checkbox" id="checkbox13" value="Salad"><label for="checkbox13">Salad</label></li>
<li><input type="checkbox" id="checkbox14" value="Burgers"><label for="checkbox14">Burgers</label></li>
</div>
2つの可能な解決策
あなただけのHTMLとJavaScriptを使用して主張している場合(何らかの理由でなし、サーバーサイドスクリプトを-それはPHPを使用して超簡単だろう)私はここ2つの、合理的な方法を見て、最初のものは、私が好むものです。
GETメソッド
の一つの方法ではなく、ポストのGETリクエストを使用しています。そうすれば、あなたはから選ばれた変数を取得することができlocation.search
、文字列や、あなたのチェックボックスをターゲットにそれを使用します。(あなたは、通常の文字列を解析する必要があります?a=1&b=2
様フォーマットが、あなたは何をしている通過知っているときには、ESP、簡単です。)だから、これは一つの方法です。localStorage
もう一つの方法は、のlocalStorageに選択を保存し、次のページ上に読み込まれます。私はこれをお勧めしませんが、あなたが本当にPOSTは、POSTすることを必要とする場合、これは、文書間で値を渡すためにあなたの唯一のチャンスかもしれません。
例
最初のソリューションの場合:
https://deneskellner.com/stackoverflow-examples/60238730/page1.html
page1.html
<form name="myform" action="page2.html">
<select name="chosen">
<option value="yoda"> Master Yoda </option>
<option value="anie"> Anakin Skywalker </option>
<option value="obwn"> Obi-Wan Kenobi </option>
</select><br>
<button type="submit"> Check me on the other side </button>
</form>
page2.html
<input type="checkbox" id="yoda" /> Master Yoda <br>
<input type="checkbox" id="anie" /> Anakin Skywalker <br>
<input type="checkbox" id="obwn" /> Obi-Wan Kenobi <br>
<script>
var pieces = location.search.replace(/^\?/,"").split("&");
var values = [];for(var i in pieces) {let a=pieces[i].split("=");values[a[0]]=a[1];}
var chosen = values["chosen"];
document.getElementById(chosen).checked = true;
</script>
<button type="button" onclick="history.back()"> Let's do it again </button>