Checkboxes not working | 易学教程

问题

I'm trying to create a checklist but only the first checkbox is working. When I click on the other ones it checks the first box. Also, I added "text-decoration: line-through;" but it's not showing up in the text. I'm pretty sure I can fix that with HTML though.

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

Here's my 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>

回答1:

The text for each checkbox needs to be wrapped inside an element. You could use the css sibling selector to strike through the text against the ticked checkbox.

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>

回答2:

Problem is with your id's and 'for' properties in labels. This will work:

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

Always remember that 'id's must be unique throughout html document. The problem with your code was that every input had same id and browser just changed state for first 'id'.

回答3:

They all have the same name and ID, thing. You need to name them different, or the system will not know them apart.

来源：https://stackoverflow.com/questions/39030974/checkboxes-not-working

标签

html

css

checkbox