web-dev-qa-db-ja.com

チェックボックスに取り消し線を追加

フォーム（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;
}

しかし、それは動作しません。

csscheckboxtwitter-bootstrap-3formsstrikethrough
10
yaylitzis

以下は、入力がチェックされたときに取り消し線を引くためのソリューションです。

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 [〜＃〜]

このソリューションでは、チェックボックスをオンにすると、ラベルに対して何らかの処理が行われます。必要に応じて、太字にしたり、色を変更したりできます。

11
Andrew

問題は、テキストがラベル内にあるチェックボックスに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
}

ブートプライ

5
Lokesh Suthar

:checked CSS疑似クラスセレクターは任意の無線を表します（<input type="radio">）、チェックボックス（<input type="checkbox">）またはオプション（<option>の<select>）チェックまたはオン状態に切り替えられる要素。ユーザーは要素をクリックするか、別の値を選択することでこの状態を変更できます。その場合、：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
}

[〜＃〜] demo [〜＃〜] 。

1
LinkinTED
.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>
1
Manoj Kumar

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

これでうまくいきました。

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