Add strikethrough to checked checkbox

Question

I am trying to add strikethrough when i select a checkbox in my form (Bootstrap v3). I coded this bootply:

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

and added a class in css

.strikethrough:checked{
  text-decoration:line-through;
}

but it doesn't work..

i didn't have space, i wrote it wrong here. I edited the question — yaylitzis, Jun 22 '15 at 08:46
Where are you trying to add a strike through to? the input or the text? — Andrew, Jun 22 '15 at 08:48
I would prefer sth with css.. but if you have a solution with javascript or jquery why not.. — yaylitzis, Jun 22 '15 at 08:50
@Andrew is right but unfortunately there is not parent selector in CSS. Check my answer for a solution. — Lokesh Suthar, Jun 22 '15 at 08:54

score 18 · Accepted Answer · edited Oct 04 '20 at 23:44

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>

JSFIDDLE

With this solution when ever the checkbox is checked it will do something to the label. so you could make it bold or change its colour if you wanted.

score 7 · Answer 2 · answered Jun 22 '15 at 08:53

Problem is that you are trying to apply line-through on checkbox where as the text is inside the label. You can wrap the text inside a <span> and alter it's CSS on :checked

<div class="checkbox">
   <label>
      <input type="checkbox" name="packersOff" class="strikethrough" value="1">
      <span>sssssssss</span>
   </label>
</div>




.strikethrough:checked + span{
  text-decoration:line-through
}

Bootply

score 2 · Answer 3 · answered Jun 22 '15 at 08:54

.strikethrough:checked + .strikeThis {
  text-decoration: line-through
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
  <label for="inputName" class="col-md-1 control-label">select</label>
  <div class="col-md-5">
   
      <input name="packersOff" class="strikethrough" value="1" type="checkbox">
      <label for="packersOff" class="strikeThis">sssssssss</label>
    
  </div>
</div>

score 2 · Answer 4 · answered Jun 22 '15 at 08:55

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

In order to make it work, rearrange your HTML to:

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

And your CSS to:

.strikethrough:checked + label {
  text-decoration:line-through
}

DEMO.

score 0 · Answer 5 · answered Jun 22 '15 at 08:59

jQuery solution:

$('#packersOff').change(function() {
  if ($('#packersOff').prop('checked') ) {
    $('#test').css('text-decoration','line-through');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
 <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
  <div class="checkbox">
            <label for="packersOff" id="test">sssssssss</label>
            <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" />
        </div>
     </div>
</div>

score -1 · Answer 6 · edited Jul 17 '17 at 06:27

-1

This worked for me.

li.my-item:hover span { visibility: visible; }
li.my-item span { visibility:hidden; }

edited Jul 17 '17 at 06:27

Rob

26,989
16
82
98

answered Jul 17 '17 at 06:15

Faheem

1

Add strikethrough to checked checkbox

6 Answers6

Linked