put form data to multiple checkbox when checked

Question

I'm developing a WordPress site, I'm also using HTML to do that. I have a form on my site on a page, users fill in details after they submit they're redirected to the next page where I set multiple checkboxes, each checkbox they check I want to store the data from the form to the checkboxes, this data can be sent to various services. Any help would be welcome, whether via javascript, jquery, PHP or html please. Below is the code generated for my checkboxes:

html {
  scroll-behavior: smooth;
}
.select{
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left; line-height: 4.0em;
  width: 26.0em; height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.select label input + span{color: #fff;
    font-size: 19px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.select input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked + span{background-color: #78E821;}

input[type="checkbox"] + span:after{
  content: "Select all"; 
}

input[type="checkbox"]:checked + span:after{
  content: "All selected"; 
}



.branded{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.branded label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.branded label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.branded label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.branded label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.branded input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.branded input:checked + span{background-color: #78E821;}

.branded input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.branded input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}


.lifepoints{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.lifepoints label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.lifepoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.lifepoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.lifepoints label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.lifepoints input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.lifepoints input:checked + span{background-color: #78E821;}

.lifepoints input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.lifepoints input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}


.mypoints{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.mypoints label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.mypoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.mypoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.mypoints label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.mypoints input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.mypoints input:checked + span{background-color: #78E821;}

.mypoints input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.mypoints input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}

<html>
  
<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const checks = document.querySelectorAll('.chk');
      const checkAll = document.getElementById('selectAll')
      document.addEventListener('click', function(e) {
        const tgt = e.target;
        if (tgt.matches('.chk')) {
          if (tgt.id === "selectAll") {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checks.forEach(chk => {
              chk.checked = tgt.checked
              chk.closest('div').querySelector('i').classList[chk.checked ? 'add' : 'remove']('fa-circle-check');
            })
          } else {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checkAll.checked = [...checks].slice(1).every(chk => chk.checked); // check all sub checkboxes are checked
            checkAll.closest('div').querySelector('i').classList[checkAll.checked ? 'add' : 'remove']('fa-circle-check');
          }
        }
      });
    });
  </script>
</head>

<body>
  <div class="select action">
    <label>
      <input type="checkbox" class="chk" id="selectAll" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2>
  <br clear="all" />
  <div class="branded surveys">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2><br clear="all" />
  <div class="lifepoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2>
  <br clear="all" />
  <div class="mypoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div>
</body>

Answer 1

If you're using a form, you could pass parameters in your POST URL and the gather those on the next page and pass them to the JS.

Page 1:

<form id="myForm" method="post" action="success.php">
    <input type="checkbox" id="female" name="female" value="Female">
    <input type="checkbox" id="male" name="male" value="Male">
</form>

<script>

    $('#myForm').change(function(){
        let postUrl, param1, param2;
        
        if ($('#female').is(":checked")) {
            param1 = 'female=true'
        } else {
            param1 = 'female=false'
        }
        
        if ($('#male').is(":checked")) {
            param2 = 'male=true'
        } else {
            param2 = 'male=false'
        }
        
        postUrl = 'success.php?' + param1 + '&' + param2
        $('#myForm').attr('action', postUrl);
    });
</script>

Page 2 or your success page:

 <script>
        let param1 = '<?php echo $_GET["female"] ?>';
        let param2 = '<?php echo $_GET["male"] ?>';
        
        if ( param1 == true || param1 == 'true') {
            $('#element1').attr('checked', 'true');
        }
        if ( param2 == true || param2 == 'true') {
            $('#element2').attr('checked', 'true');
        }
    </script>

Just an idea..