Checkboxen funktionieren nicht

Question

Ich versuche eine Checkliste zu erstellen, aber nur das erste Kontrollkästchen funktioniert. Wenn ich auf die anderen klicke, wird das erste Kästchen aktiviert. Außerdem habe ich "text-decoration: line-through" hinzugefügt. aber es wird nicht im Text angezeigt. Ich bin mir ziemlich sicher, dass ich das mit HTML beheben kann.

http://codepen.io/tyl-er/pen/kXmkqB?editors=0100

Hier ist mein Code:

<div class="box"> 
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> get an army 
     <br> 
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> free the slaves 
     <br> 
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> train my dragons 
     <br> 
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> cross the narrow sea 
     <br> 
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> become Queen of Westeros 
    </div> 

<style> 
    input[type=checkbox] { 
    display:none; 
    } 
    input[type=checkbox] + label 
    { 
    background: #999; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 
    input[type=checkbox]:checked + label 
    { 
    background: #0080FF; 
    text-decoration: line-through; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 

</style> 

Answer 1

Der Text für jedes Kontrollkästchen muss in ein Element eingeschlossen werden. Sie können den css-Geschwisterselektor verwenden, um den Text mit dem Häkchen zu markieren.

input[type=checkbox] { 
 
display:none; 
 
} 
 
input[type=checkbox] + label 
 
{ 
 
background: #999; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked + label 
 
{ 
 
background: #0080FF; 
 
text-decoration: line-through; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked + label + label { 
 
    text-decoration: line-through; 
 
} 
 

 

 
label p { 
 
    display: inline block; 
 
}

<div class="box"> 
 
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> <label>get an army</label> 
 
<br> 
 
<input type='checkbox' name='thing1' value='valuable2' id="thing1"/><label for="thing1"></label> <label>free the slaves</label> 
 
<br> 
 
<input type='checkbox' name='thing2' value='valuable3' id="thing2"/><label for="thing2"></label> <label>train my dragons</label> 
 
<br> 
 
<input type='checkbox' name='thing3' value='valuable4' id="thing3"/><label for="thing3"></label> <label>cross the narrow sea</label> 
 
<br> 
 
<input type='checkbox' name='thing4' value='valuable5' id="thing4"/><label for="thing4"></label> <label>become Queen of Westeros</label> 
 
</div>

Answer 2

Sie alle den gleichen Namen und ID haben, thing. Sie müssen sie anders benennen, sonst wird das System sie nicht unterscheiden.

Answer 3

Problem ist mit Ihrer ID und 'für' Eigenschaften in Etiketten. Dies funktioniert:

<div class="box"> 
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> get an army 
<br> 
<input type='checkbox' name='thing1' value='valuable2' id="thing1"/><label for="thing1"></label> free the slaves 
<br> 
<input type='checkbox' name='thing2' value='valuable3' id="thing2"/><label for="thing2"></label> train my dragons 
<br> 
<input type='checkbox' name='thing3' value='valuable4' id="thing3"/><label for="thing3"></label> cross the narrow sea 
<br> 
<input type='checkbox' name='thing4' value='valuable5' id="thing4"/><label for="thing4"></label> become Queen of Westeros 
</div> 

Denken Sie immer daran, dass ‚ids im gesamten HTML-Dokument eindeutig sein muss. Das Problem mit Ihrem Code war, dass jede Eingabe dieselbe ID hatte und der Browser den Status für die erste 'id' geändert hat.