Add Strikethrough to Checked Checkbox

Add strikethrough to checked checkbox

Here is a solution to put a strike through when your input is checked:

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

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
            <input type="checkbox" name="packersOff" id="packers" value="1"/>
            <label for="packers" class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

Strikethrough text on checked checkbox

+ is the immediately sibling selector and the label isn't one. Try input[type=checkbox]:checked~.item-inner .item-title:

input[type=checkbox]:checked~.item-inner .item-title {  text-decoration: line-through;}

<div class="list media-list">  <ul id="todoList">    <li class="swipeout"><label class="item-checkbox item-content swipeout-content">              <input type="checkbox" id="test1" name="checkbox" value="2" />              <i class="icon icon-checkbox"></i>              <div class="item-inner">                <div class="item-title-row">                  <div class="item-title" for="test1">Test</div>                  <div class="item-after">2019</div>                </div>                <div class="item-subtitle">Test text</div>                <div class="item-text">By Test</div>              </div>            </label>      <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>    </li>  </ul></div>

How to strike through input text when checkbox is ticked?

Your code has the following issue. When you write these lines of css:

    .container input:checked~.checkmark {
    text-decoration: line-through
    }

You're not adding the text-decoration: line-through css property to the text input element you want to strike, but to the checkmark instead. Therefore, the text input element is not receiving any strike-through styles.

What I did to solve your problem was adding the styles to the text input. I did this by doing some small changes to your HTML and CSS, this is the code:

    /* Customize the label (the container) */
    .container {
    position: relative;
    padding-left: 50px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #333;
    font-size: 18px;
    }
    /* Hide the browser's default checkbox */
    .container input[type="checkbox"] {
    display: none
    }
    /* Create a custom checkbox - using ::before */
    .checkmark::before {
    content: "";
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: solid 2px #194263;
    position: absolute;
    left:0;
    top:0;
    margin-right: 10px;
    }
    /* Show the checkmark when checked */
    .container input:checked~.checkmark:after {
    display: block;
    left: 9px;
    top: 5px;
    width: 8px;
    height: 14px;
    border: solid #194263;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    content: "";
    position: absolute;
    margin-right: 10px;
    }
    /* strike through the text */
    .container input:checked ~ input {
      text-decoration: line-through
    }

<label class="container">
  <input type="checkbox">
  <input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item">
  <span class="checkmark"></span>
  <br>   
</label>

Text strike-through on check box selection

Razor will add <form> tags around your checkbox, so you're applying the css to the <td> that contains the checkbox, not the parent row as you might think with parent().parent();

Try using the closest selector to traverse up the dom tree and find the parent row:

$(this).closest("tr").css("text-decoration","line-through");

How to strike out the text of the corresponding checkbox in my to-do app when I check the checkbox?

Lets get through this now, First of all we have this piece of code:

 document.getElementById(YourCheckBoxIDHere).innerHTML = "<s>"+ document.getElementById(YourCheckBoxIDHere).innerHTML +"</s>"

Above code adds the strike through, But how do we let it work on check?

Simply we put the code here after creating your checkbox:

document.getElementById(x).addEventListener("change", CrossMeOut);

And declare your function:

function myFunction(x) {
    x.innerHTML = "<s>"+ x.innerHTML +"</s>
}

Of course you might have to deal with a few minor things probably when applying it specially to your code. But I hope this post has put you at the right track!

---

Related Topics