将删除线添加到已选复选框。

Question

我正在尝试在我的表单（Bootstrap v3）中选中复选框时添加删除线。 我编写了这个引导示例：

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
             <label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label>
        </div>
     </div>
</div>

并在CSS中添加了一个类

.strikethrough:checked{
  text-decoration:line-through;
}

但是它不起作用...

- yaylitzis

---

我没有空间，在这里写错了。我编辑了问题。 - yaylitzis

你也在寻找一个Javascript解决方案吗？ - odedta

我更喜欢使用CSS来解决问题，但如果你有JavaScript或jQuery的解决方案，那也可以。 - yaylitzis

将类放在标签上而不是输入框。 - Andrew

@Andrew 是正确的，但不幸的是，在 CSS 中没有父选择器。请查看我的答案以获取解决方案。 - Lokesh Suthar

Answer 1

这里是一个解决方案，可以在您的输入被选中时添加删除线:

input[type=checkbox]:checked + label.strikethrough{
  text-decoration: line-through;
}

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
            <input type="checkbox" name="packersOff" id="packers" value="1"/>
            <label for="packers" class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

使用此解决方案，只要选中复选框，它就会对标签执行某些操作。 因此，如果您想要使其变粗或更改其颜色，则可以这样做。

JSFIDDLE

- Andrew

Answer 2

问题在于您正在尝试在复选框上应用line-through，而文本位于标签内。您可以将文本包装在<span>中，并在:checked时修改其CSS。

<div class="checkbox">
   <label>
      <input type="checkbox" name="packersOff" class="strikethrough" value="1">
      <span>sssssssss</span>
   </label>
</div>




.strikethrough:checked + span{
  text-decoration:line-through
}

Bootply

- Lokesh Suthar

Answer 3

:checked是CSS伪类选择器，它表示任何选中或切换为开启状态的单选框（<input type="radio">）、复选框（<input type="checkbox">）或选项（<option>在<select>中）。用户可以通过点击元素或选择不同的值来更改此状态，在这种情况下，:checked伪类不再适用于此元素，而适用于相关元素。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

为了使其起作用，请重新排列您的HTML：

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
          <input name="packersOff" class="strikethrough" value="1" type="checkbox">
          <label for="packersOff">sssssssss</label>
        </div>
     </div>
</div>

并且你的CSS应该：

.strikethrough:checked + label {
  text-decoration:line-through
}

DEMO.

- GreyRoofPigeon

Answer 4

.strikethrough:checked + .strikeThis {
  text-decoration: line-through
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
  <label for="inputName" class="col-md-1 control-label">select</label>
  <div class="col-md-5">
   
      <input name="packersOff" class="strikethrough" value="1" type="checkbox">
      <label for="packersOff" class="strikeThis">sssssssss</label>
    
  </div>
</div>

- m4n0

Answer 5

jQuery解决方案：

$('#packersOff').change(function() {
  if ($('#packersOff').prop('checked') ) {
    $('#test').css('text-decoration','line-through');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
 <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
  <div class="checkbox">
            <label for="packersOff" id="test">sssssssss</label>
            <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" />
        </div>
     </div>
</div>

- odedta

---

哇哈 - 真是一个过度杀伤力的做法。 - inetphantom

Answer 6

这对我有用。

li.my-item:hover span { visibility: visible; }
li.my-item span { visibility:hidden; }

- Faheem