添加删除线以选中复选框

时间:2015-06-22 08:41:30

标签: css checkbox twitter-bootstrap-3 html-form strikethrough

当我在表单中选择一个复选框时,我试图添加删除线(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;
}

但它不起作用..

6 个答案:

答案 0 :(得分:9)

这是一个在检查输入时进行检查的解决方案:

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

使用此解决方案时,如果选中复选框,它将对标签执行某些操作。如果你愿意的话,你可以把它变成粗体或改变它的颜色。

答案 1 :(得分:5)

问题是您正在尝试在复选框上应用<xs:element name="generator"> <xs:complexType> <xs:sequence> <xs:element name="GenMode" maxOccurs="unbounded" type="GenModeType" /> </xs:sequence> <xs:attribute name="Mode" use="required" type="xs:string"/> </xs:complexType> <xs:key name="GenModeName"> <xs:selector xpath="GenMode"/> <xs:field xpath="@name"/> </xs:key> </xs:element> <xs:complexType name="GenModeType"> <xs:attribute name="name" use="required" type="xs:string"/> <xs:attribute name="kV" use="required" type="xs:integer"/> <xs:attribute name="mA" use="required" type="xs:decimal"/> </xs:complexType> ,因为文本位于标签内。您可以将文本包装在line-through中,并在<span>

上更改它的CSS
:checked

Bootply

答案 2 :(得分:1)

&#13;
&#13;
.strikethrough:checked + .strikeThis {
  text-decoration: line-through
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

  

:checked CSS伪类选择器代表任何广播(<input type="radio">),复选框(<input type="checkbox">)或选项(<option>   在<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

答案 4 :(得分:0)

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>

答案 5 :(得分:0)

这对我有用。

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