css - 색상 - 카카오톡 취소선




확인란에 취소 선을 추가하십시오. (4)

내 양식 (부트 스트랩 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;
}

하지만 작동하지 않습니다 ..


:checked CSS pseudo-class selector는 :checked 라디오 ( <input type="radio"> ), 체크 박스 ( <input type="checkbox"> ) 또는 옵션 켜짐 상태로 토글됩니다. 사용자는 요소를 클릭하거나 다른 값을 선택하여이 상태를 변경할 수 있습니다.이 경우 : 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
}

데모 .


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>


문제는 텍스트가 라벨 안에있는 경우 체크 박스에 line-through 를 적용하려고하는 것입니다. <span> 안에 텍스트를 감싸고 CSS를 :checked 과 같이 바꿀 수 있습니다 :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
}

유령


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





strikethrough