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.

CodePudding user response：

Assuming Windows Forms:

1. Open the form in the Windows Forms designer and add a checkbox.
2. Double-click the checkbox in the designer to add a handler.
3. In the handler, add the following code.

(assuming the checkbox is called checkBox1):

void checkBox1_CheckedChanged(object sender, System.EventArgs e)
{
    checkBox1.Font = new Font(
        checkBox1.Font,
        checkBox1.Checked ? FontStyle.Strikeout : FontStyle.Regular);
}

Note that this does not dispose the old font handle, but code does not normally bother to do that.

CodePudding user response：

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 >
  <li>
    <div >
      <input type="checkbox" name="packersOff" value="1" />
      <label for="packers" >001 Task Item</label>
    </div>
  </li>

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

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

</ul>

Fiddle