Checkbox Strikeout text when ticked

Question

I have been trying to get the text strikeout when it is ticked in a check box. I have been looking on the web for the last two days and finally decided to post here for help.

Basically, I would like to build a to-do list app and when a task is ticked it gets striked through.

Any help would be highly appreciated.

Thanks.

Answer 1

Try Like This Plan CSS/HTML no JavaScript required.

.todo-box {
  border: 1px solid gray;
  border-width: 1px;
}

.todo-item {
  padding: 4px 4px 4px 4px;
  background: gold;
  border-bottom: 1px dotted green;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

input[type=checkbox]:checked+label.strikethrough {
  text-decoration: line-through;
}

input[type=checkbox] {
  border: 1px solid #333;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 20px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 20px;
}

<ul class="todo-box">
  <li>
    <div class="checkbox todo-item">
      <input type="checkbox" name="packersOff" value="1" />
      <label for="packers" class="strikethrough">001 Task Item</label>
    </div>
  </li>

  <li>
    <div class="checkbox todo-item">
      <input type="checkbox" name="packersOff" value="1" />
      <label for="packers" class="strikethrough">002 Task Item</label>
    </div>
  </li>

  <li>
    <div class="checkbox todo-item">
      <input type="checkbox" name="packersOff" value="1" />
      <label for="packers" class="strikethrough">003 Task Item</label>
    </div>
  </li>

</ul>

Fiddle