将删除线添加到选中的复选框

我试图在我的表单（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; 
}

增加一类，但它不工作..

来源

2015-06-22 yaylitzis

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

你在哪里试图添加一个罢工？输入或文字？ – Andrew

您是否正在寻找Javascript解决方案？ – odedta

问题是，你尝试在复选框适用line-through的地方文本在标签内。你可以用文本中<span>内，改变它的CSS上:checked

<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

来源

2015-06-22 08:53:20

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

来源

2015-06-22 08:54:42

的:checked CSS伪类选择代表任何无线电（<input type="radio">），复选框（<input type="checkbox">）或选项（）在<select>）元素，该元素被检查或切换到开启状态。用户可以通过单击该元素或选择不同的值来更改此状态，在这种情况下：已检查的伪类不再使用适用于此元素，但将适用于相关的元素。

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

来源

2015-06-22 08:55:00 LinkinTED

这里是一个解决方案，通过把一击，当你输入时检查：

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 type="checkbox" name="packersOff" value="1"/> 
      <label class="strikethrough">sssssssss</label> 
     </div> 
    </div> 
</div>

CSS

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

JSFIDDLE

有了这个解决方案时，曾经复选框被选中，它会对标签做些什么。所以你可以让它变大胆或者如果你想要改变它的颜色。

来源

2015-06-22 08:57:32 Andrew

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 "> 
 
\t <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
\t \t <div class="checkbox"> 
 
      <label for="packersOff" id="test">sssssssss</label> 
 
      <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" /> 
 
     </div> 
 
    </div> 
 
</div>

来源

2015-06-22 08:59:21 odedta

这为我工作。

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

来源

2017-07-17 06:15:28 Faheem

将删除线添加到选中的复选框

回答

相关问题