CODEWITHSUNDEEP
javascripthtmlcss
Bhawesh Verma
Bhawesh Verma

Reputation: 35

How to toggle custom checkbox using JavaScript?

I have been trying to make progress bar for showing form fill progress. I thought of using checkbox to control the progress bar which looks visually appealing and is quite easy I guess. But I am stuck with controlling the checkbox via JavaScript. 

let bar;

bar = document.createElement('div');
bar.id = "bar"
bar.style.height = 10 + 'px';
bar.style.width = 100 + '%';
//bar.style.backgroundColor = 'green';
bar.style.border = 2 + 'px' + ' ' + 'solid';
bar.style.borderRadius = 5 + 'px';
document.getElementById('progress').appendChild(bar);
body {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  width: 88%;
}

.chd:hover input~.checkmark {
  background-color: #ccc;
}

label,
input,
textarea {
  width: 100%;
}

label {
  font-weight: bold;
}

input,
textarea {
  margin-bottom: 2em;
  border-radius: 5px;
}

textarea {
  height: 12em;
  border-radius: 5px;
}

#progress {
  margin-bottom: 2em;
}

#chd {
  position: relative;
  float: inline-end;
  cursor: pointer;
}

#chd-t {
  position: relative;
  float: inline-end;
  cursor: pointer;
}

#chb {
  position: absolute;
  bottom: 50px;
  right: 5px;
  margin: 0;
  padding: 0;
  opacity: 0;
  height: 0;
  width: 0;
  cursor: pointer;
}

#chd-t #chb {
  bottom: 190px;
}

#chd-t .checkmark {
  bottom: 190px;
}

.checkmark {
  position: absolute;
  bottom: 50px;
  opacity: 1;
  right: 5px;
  height: 15px;
  width: 15px;
  margin: 0em;
  padding: 0;
  border-radius: 50%;
  background-color: #eee;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

input:checked~.checkmark:after {
  display: block;
}

input:checked~.checkmark {
  background-color: rgb(11, 158, 67);
}

.checkmark:after {
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
<!DOCTYPE html>
<html>

<head>
  <title>Progress bar project</title>
</head>

<body>

  <h1>Progress Bar</h1>

  <!-- Show form progress here -->
  <div id="progress"></div>

  <form id="autosave">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name">
      <div id="chd">
        <input type="checkbox" checked="checked" id="chb">
        <span class="checkmark"></span>
      </div>
    </div>

    <div>
      <label for="email">Email Address</label>
      <input type="email" id="email">
      <div id="chd">
        <input type="checkbox" checked="checked" id="chb">
        <span class="checkmark"></span>
      </div>
    </div>

    <div>
      <label for="phone">Phone</label>
      <input type="tel" id="phone">
      <div id="chd">
        <input type="checkbox" checked="checked" id="chb">
        <span class="checkmark"></span>
      </div>
    </div>

    <div>
      <label for="website">Website</label>
      <input type="url" id="website">
      <div id="chd">
        <input type="checkbox" checked="checked" id="chb">
        <span class="checkmark"></span>
      </div>
    </div>

    <div>
      <label for="notes">Notes</label>
      <textarea id="notes"></textarea>
      <div id="chd-t">
        <input type="checkbox" checked="checked" id="chb">
        <span class="checkmark"></span>
      </div>
    </div>

    <button>Submit</button>
  </form>
  <script src="./app.js"></script>
</body>

</html>

Upvotes: 1

Views: 117

Answers (1)

Hanterdro
Hanterdro

Reputation: 99

Not sure what about what your question/problem is.

But IDs are unique. Your are using the ID chd multiple times.

.chd:hover input~.checkmark {
  background-color: #ccc;
}

can't work, because in your HTML there's no class chd, only IDs.

I suggest do a https://jsfiddle.net example of your non working code and try to explain what you want to achieve (and post the jsfiddle link here).

Upvotes: 1

Related Questions