Add strikethrough to checked checkbox

后端 未结 6 1028
时光说笑
时光说笑 2021-02-13 23:57

I am trying to add strikethrough when i select a checkbox in my form (Bootstrap v3). I coded this bootply:

相关标签:
6条回答
  • 2021-02-14 00:08

    This worked for me.

    li.my-item:hover span { visibility: visible; }
    li.my-item span { visibility:hidden; }
    
    0 讨论(0)
  • 2021-02-14 00:13

    Problem is that you are trying to apply line-through on checkbox where as the text is inside the label. You can wrap the text inside a <span> and alter it's CSS on :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

    0 讨论(0)
  • 2021-02-14 00:16

    Here is a solution to put a strike through when your input is checked:

    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

    With this solution when ever the checkbox is checked it will do something to the label. so you could make it bold or change its colour if you wanted.

    0 讨论(0)
  • 2021-02-14 00:19

    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.

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

    In order to make it work, rearrange your HTML to:

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

    And your CSS to:

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

    DEMO.

    0 讨论(0)
  • 2021-02-14 00:22

    jQuery solution:

    $('#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>

    0 讨论(0)
  • 2021-02-14 00:28

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

    0 讨论(0)
提交回复
热议问题