Hinzufügen durchgestrichen zum Checkbox-Kontrollkästchen

Question

Ich versuche, durchgestrichen, wenn ich ein Kontrollkästchen in meinem Formular (Bootstrap v3) auswählen. Ich codiert diese 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> 

und hat eine Klasse in css

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

aber es funktioniert nicht ..

Answer 1

Problem ist, dass Sie versuchen line-through auf Checkbox anzuwenden, wenn als Der Text befindet sich innerhalb des Etiketts. Sie können den Text in einem <span> wickeln und ändern es CSS ist auf :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 2

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

Die :checked CSS Pseudo-Klasse-Selektor für eine beliebige Radio (<input type="radio">) , Kontrollkästchen (<input type="checkbox">) oder Option (<option> in einem <select>) Element, das in einen Ein-Zustand geprüft oder umgeschaltet wird. Der Benutzer kann diesen Status ändern, indem er auf das Element klickt oder einen anderen Wert als auswählt. In diesem Fall gilt für dieses Element die überprüfte Pseudoklasse nicht mehr , sondern die entsprechende.

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

Um es zu machen, arbeiten, neu anordnen Ihre 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 name="packersOff" class="strikethrough" value="1" type="checkbox"> 
      <label for="packersOff">sssssssss</label> 
     </div> 
    </div> 
</div> 

Und Ihre CSS:

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

DEMO.

Answer 4

Hier ist eine Lösung, die ein Durchschlagen zu setzen, wenn Sie die Eingabe geprüft:

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

Mit dieser Lösung, wenn überhaupt Wenn das Kontrollkästchen aktiviert ist, wird etwas an der Beschriftung vorgenommen. So könnten Sie es fett oder ändern Sie die Farbe, wenn Sie wollten.

Answer 5

jQuery Lösung:

$('#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 "> 
 
\t <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
\t \t <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

Das ist für mich gearbeitet.

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