Question

我正在尝试创建核对清单，但只有第一个复选框正常工作。当我点击其他的时，它会检查第一个框。另外，我添加了＃34; text-decoration：line-through;＆＃34;但它没有出现在文本中。我很确定我可以用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>

Answer 1

问题在于标签中的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'的状态。

Answer 2

它们都具有相同的名称和ID thing。您需要将它们命名为不同，否则系统将无法区分它们。

Answer 3

每个复选框的文本都需要包含在元素中。您可以使用css同级选择器在勾选的复选框中查看文本。

＆＃13;

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

＆＃13;

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

＆＃13;

复选框无效

3 个答案: