复选框不起作用 [英] Checkboxes not working

问题描述

我正在尝试创建一个清单，但是只有第一个复选框有效。当我单击其他选项时，它会选中第一个框。另外，我添加了文本装饰：行直通；但它没有显示在文本中。我敢肯定我可以用HTML修复它。

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

这是我的代码：

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

推荐答案

每个复选框的文本都必须包装在元件。您可以使用css同级选择器在选中的复选框中删除文本。

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>

这篇关于复选框不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！