复选框不起作用

Question

我正在尝试创建清单，但只有第一个复选框有效。当我点击其他的时，它会选中第一个框。另外，我添加了“文本装饰：直通；”但它没有出现在文本中。不过，我很确定我可以用 HTML 解决这个问题。

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

这是我的代码：

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

原文由 tyl-er 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

每个复选框的文本需要包装在一个元素中。您可以使用 css 兄弟选择器在选中的复选框上删除文本。

 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>

原文由 z0mBi3 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题出在标签中的 id 和“for”属性。这将起作用：

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

永远记住，’id’ 在整个 html 文档中必须是唯一的。您的代码的问题是每个输入都有相同的 ID，而浏览器只是更改了第一个“id”的状态。

原文由 Sandesh K 发布，翻译遵循 CC BY-SA 3.0 许可协议