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

Question

当我 select 我的表单中的复选框 (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

中添加了一个class

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

但是没用..

Answer 1

问题是您正试图将 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

Answer 2

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

Answer 3

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

来源：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.

Answer 4

这里有一个解决方案，可以在检查您的输入时删除删除线：

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

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

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>

Answer 6

这对我有用。

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

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

Add strikethrough to checked checkbox

css

checkbox

twitter-bootstrap-3

forms

strikethrough