Add snap to checked flag

Question

I am trying to add strikethrough when selecting a checkbox in my form (Bootstrap v3). I encoded 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 class to css

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

but it does not work.

Answer 1

Here is the solution to be made when your entry is verified:

HTML:

 <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" value="1"/> <label class="strikethrough">sssssssss</label> </div> </div> </div> 

CSS

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

JSFIDDLE

With this solution, when the checkbox is checked, it will do something on the label. so you can make it bold or change its color if you want.

Answer 2

The problem is that you are trying to apply line-through on the checkbox where the text is inside the label. You can wrap the text inside the <span> and change its CSS to :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

Answer 3

 .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> 

Answer 4

Pseudo-class selector :checked CSS represents any radio station ( <input type="radio"> ), a flag ( <input type="checkbox"> ), or a parameter ( <option> in the <select> element) that is checked or switches to on state. the user can change this state by clicking on an element or choosing a different value, and in this case: the verified pseudo-class will no longer apply to this element, but refers to the corresponding one.

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

To make it work, change 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 for:

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

Demo .

Answer 5

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> 

Answer 6

It worked for me.

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