How do I use a checkbox within my WordPress website?

I have made a toggle switch and I would like to integrate it into my site but I am unsure how to do this. I am using the plugin bbPress on my WordPress site and would like for the user of the website to be able to click the toggle switch when leaving a comment and then for their input to be displayed on their comment.

Here is the HTML for the toggle switch: `

<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">

    <!-- ____[OUTER BOX WITH BORDER LINE]____ -->
    <div class="toggle__box">

        <!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
        <input type="checkbox" id="toggle-check">

        <!-- ____[TOGGLE LABEL FOR INPUT]____ -->
        <label for="toggle-check" class="toggle__label">

            <!-- ____[TOGGLE THUMB ICON]____ -->
            <div class="toggle__thumb">
                <img src= <?php get_image_for_slider(); ?> >
            </div>

            <!-- ____[TEXT OF TOGGLE]____ -->
            <div class="toggle__text--green">BULLISH</div>
            <div class="toggle__text--red">BEARISH</div>
        </label>

    </div>

</div>

and then here is the CSS for this button: *, *::before, *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  ;
}
.toggle input {
  display: none;
  opacity: 0;
}
.toggle__box {
  width: 13rem;
  height: 4rem;
  border-radius: 100px;
  border: 1px solid #707070;
  position: relative;
  overflow: hidden;
}
.toggle__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer;
}
.toggle__thumb {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: .6rem;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.toggle__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.toggle__text--red,
.toggle__text--green {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-transition: all .005s linear;
  transition: all .005s linear;
  z-index: 0;
}

.toggle__text--red {
  color: #FF001A;
  left: 10%;
  opacity: 0;
  visibility: hidden;
}

.toggle__text--green {
  right: 10%;
  color: #29FF00;
}

.toggle #toggle-check:checked+label .toggle__thumb {
  left: calc(100% - .6rem);
  transform: translate(-100%, -50%);
}

.toggle #toggle-check:checked+label .toggle__text--red {
  opacity: 1;
  visibility: visible;
}

.toggle #toggle-check:checked+label .toggle__text--green {
  opacity: 0;
  visibility: hidden;
}` 

Is there some way to link a variable to this switch/checkbox and so when the user clicks it I can use that to display something to the screen - as mentioned above? I have tried using isset($_POST["name"] but that didn't seem to work. I have also seen that maybe adding an event listener in JavaScript could work but I am not sure how to code in Java so any help would be great!

Many Thanks

You should be able to solve this using JS. Just insert this JS and then put what every you want in the function.

document.getElementById("toggle-check").addEventListener("click", funct1);

function funct1() {
  /* you can put what ever function or thing you want to happen when you click the box here!*/
  document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  ;
}

.toggle input {
  display: none;
  opacity: 0;
}

.toggle__box {
  width: 13rem;
  height: 4rem;
  border-radius: 100px;
  border: 1px solid #707070;
  position: relative;
  overflow: hidden;
}

.toggle__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer;
}

.toggle__thumb {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: .6rem;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.toggle__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.toggle__text--red,
.toggle__text--green {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-transition: all .005s linear;
  transition: all .005s linear;
  z-index: 0;
}

.toggle__text--red {
  color: #FF001A;
  left: 10%;
  opacity: 0;
  visibility: hidden;
}

.toggle__text--green {
  right: 10%;
  color: #29FF00;
}

.toggle #toggle-check:checked+label .toggle__thumb {
  left: calc(100% - .6rem);
  transform: translate(-100%, -50%);
}

.toggle #toggle-check:checked+label .toggle__text--red {
  opacity: 1;
  visibility: visible;
}

.toggle #toggle-check:checked+label .toggle__text--green {
  opacity: 0;
  visibility: hidden;
}

`

<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>