为选中的复选框添加删除线答案

【问题标题】：Add strikethrough to checked checkbox为选中的复选框添加删除线
【发布时间】：2015-09-07 15:20:49
【问题描述】：

当我在我的表单中选择一个复选框时（Bootstrap v3），我正在尝试添加删除线。我编码了这个bootply：

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

但它不起作用..

【问题讨论】：

我没有空间，我在这里写错了。我编辑了问题
您要在哪里添加删除线？输入还是文本？
您也在寻找 Javascript 解决方案吗？
到文本@Andrew。在ssss
我更喜欢用 css.. 但如果你有 javascript 或 jquery 的解决方案，为什么不......

标签： css checkbox twitter-bootstrap-3 forms strikethrough

【解决方案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

使用此解决方案，只要选中复选框，它就会对标签执行某些操作。因此，您可以根据需要将其设为粗体或更改其颜色。

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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>

【讨论】：

哇——太夸张了

【解决方案6】：

这对我有用。

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

【讨论】：