Question 222867 in CSS Question posted in
Some basic documentation can be found here.

Css – Striking through text when checkbox is checked

I’m trying to make a To-Do list app using express and EJS as middleware. It’s supposed to have a list of tasks with a checkbox beside every task that has been added. When the task is done you can check the checkbox and the text will get striked through signifying the completion of the task. I used adding javascript at the end of my .ejs file but there’s some problem with it and its not working

here is the EJS code snippet

<% for(var i = listItems2.length -1; i >= 0; i--){ %>
                    <div class="flex">
                      <input type="checkbox" name="checker" id="checkbox_id" class="h-7 w-7 m-3 flex-shrink-0">
                      <p name="para" class="text-[32px] font-[200]"><%= listItems2[i] %></p>
                    </div>
<% } %>

and the javascript code

<script>
  var boxes = document.getElementsByName("checker");
  var paras = document.getElementsByName("para");
  function updateStyle() {
  for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].checked) {
      paras[i].style.webkitTextStroke = "1px black"; 
      paras[i].style.textStroke = "1px black";       
    } else {
      paras[i].style.webkitTextStroke = "none";      
      paras[i].style.textStroke = "none";
    }
  }
}


for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("change", updateStyle);
}
</script>
Tags:

2

Answers


  1. 0

    Add a class or style the label to give it strike through styles when the checkbox is checked.

    Use ::before and ::after content element to provide context that the item is stricken text.

    label {
  color: black;
}

#todo {
  accent-color: #777
}

#todo:checked+label {
  color: #777;
  text-decoration: line-through;
  &::before,
  &::after {
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect 1px, 1px, 1px, 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  &::before {
    content: "[start of stricken text]";
  }
  &::after {
    content: "[end of stricken text]";
  }
}
    <input type="checkbox" id="todo">
<label for="todo">Todo Item</label>
    Login or Signup to reply.
  2. 0

    Just wrap the label around the checkbok (preventing the need for the for attribute and id – but you can leave those in if you want… and then put the label text in a span and use the :checked pseudo selector and direct sibling combinator to get the strike-trhough via css
    I have set one item to checked to show the effect and you CAN add another span with the ::before and ::after stylign on it to get a styled checkbox isf the bowser default stylngi is not to your liking.

    label {
  color: black;
  display: block;
  margin-bottom: 8px
}


input:checked+span {
  color: #777;
  text-decoration: line-through;
}
    <label>
  <input type="checkbox" checked>
  <span>Todo Item</span>
</label>
<label>
  <input type="checkbox">
  <span>Todo Item 2</span>
</label>
<label>
  <input type="checkbox">
  <span>Todo Item 3</span>
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search