How do I use a checkbox within my WordPress website?

Question

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

Answer 1

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>