如何根据所选的数据列表选项选择复选框（不同的页面）

Question

我会尽量说清楚：我有两个 html，一个是表单，另一个是复选框，我希望这取决于放在表单 html 中的值（我不知道如果这样称呼它是正确的），某些复选框会显示为选中状态或其他复选框。

例如，

如果我选择“Desserts”并单击“go”按钮，我将转到其他页面，其中有复选框，因此“Desserts”复选框将显示为选中状态。

我试图做很多事情，但没有。 非常感谢！

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>     

Answer 1

当你登陆第二个 html 页面时，运行一个小的 javascript 代码，

例如，您从下拉列表中选择了Desert并将其传递到第二页。 在第二页：

1. 首先你阅读所有可用的复选框，
2. 循环遍历所有复选框并比较复选框的值是否等于从 page1 接收到的值。 即（沙漠）
3. 如果发现匹配，那么就设置属性checked为true该复选框。

脚本将如下所示：

const allCheckBox = document.querySelectorAll(".ks-cboxtags input");

allCheckBox.forEach((c) => {
    if (c.value === "Desserts") {
        c.checked = true;
    }
})

Answer 2

2 种可能的解决方案

如果您坚持只使用 HTML 和 JavaScript （并且出于某种原因没有使用服务器端脚本 - 使用 PHP 会非常容易），我在这里看到两种合理的方法，第一种是我更喜欢的。

1. 获取方法
   一种方法是使用 get 请求而不是 post。 这样，您可以从location.search字符串中获取所选变量，然后使用它来定位您的复选框。 （您必须从通常的?a=1&b=2格式解析字符串，但这很容易，尤其是当您知道要传递的内容时。）所以这是一种方法。

2. 本地存储
   另一种方法是将选择存储在 localStorage 中，然后在下一页阅读。 我不会推荐这个，但如果你真的需要 POST 是 POST，这可能是你在文档之间传递值的唯一机会。
   
   

例子

对于第一个解决方案：

https://deneskellner.com/stackoverflow-examples/60238730/page1.html

页面1.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>