Как установить флажок в зависимости от выбранной опции списка данных (разные страницы)

Question

Я постараюсь прояснить: у меня есть два html, один, где у меня есть форма, а другой флажки, я хотел бы, чтобы это зависело от значений, введенных в html формы ( Я не знаю, правильно ли называть это так ), некоторые флажки появляются флажки или другие.

Например ,

Если я выберу «Десерты» и нажму на кнопку «go», я 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>     

Answer 1

2 возможных решения

Если вы настаиваете на использовании только HTML и JavaScript (и по какой-либо причине не используете серверный скрипт - было бы очень просто использовать PHP) Я вижу два разумных способа здесь, и первый - то, что я бы предпочел.

1. Метод GET
   Один из способов - использовать запрос get вместо поста. Таким образом, вы можете получить выбранную переменную из строки location.search, а затем использовать ее для настройки вашего флажка. (Вам придется анализировать строку из этого обычного ?a=1&b=2 -подобного формата, но это легко, особенно если вы знаете, что вы передаете.) Так что это один из способов .

2. 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>

Answer 2

Когда вы попадаете на вторую страницу html, запустите небольшой код javascript,

, например, вы выбрали Desert из раскрывающегося списка и передали его на вторую страницу. На второй странице:

1. сначала вы читаете все доступные флажки,
2. L oop через все флажки и сравниваете значение флажка равно значению, полученному со страницы 1 , т.е. ( Пустыня )
3. Если вы найдете совпадение, просто установите свойство checked как true для этого флажка.

скрипт будет выглядеть как:

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

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