チェックボックスをオンにしてスタイリングする（ブートストラップ付き）

Question

チェックボックスをオンまたはオフにした場合、その条件に基づいてブートストラップスタイルのチェックボックスを簡単な形式でスタイリングします。しかし、それは何らかの理由で動作しません。スタイリングを実行するスパン要素は、チェックされた状態とチェックされていない状態のスタイリングを受けません。このフォームは、（それはまだ動作しません。一度だけ表示されている場合、しかし）入力要素が同じIDと名前を保ったまま、ページに複数回繰り返され、注意してください

input[type='button'].icon-checkbox { 
 
    display: none 
 
} 
 

 
input[type='checkbox'].icon-checkbox { 
 
    display: none; 
 
} 
 

 
input[type='checkbox'].icon-checkbox+label .unchecked { 
 
    display: inline-block; 
 
} 
 

 
input[type='checkbox'].icon-checkbox+label .checked { 
 
    display: none; 
 
} 
 

 
input[type='checkbox']:checked.icon-checkbox { 
 
    display: none 
 
} 
 

 
input[type='checkbox']:checked.icon-checkbox+label.unchecked { 
 
    display: none 
 
} 
 

 
input[type='checkbox']:checked.icon-checkbox+label .checked { 
 
    display: inline-block 
 
}

<form style="display: block;" id="commentary_14"> 
 
    <label for="id_is_anonymous"> 
 
    <span classname="checkbox-label-text">Stay Anonymous</span>    
 
    <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>    
 
    <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span> 
 
    :</label> 
 
    <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> (...) 
 
</form>

Jennifer Goncalvesはfiddleを作成しました。（私は知り合いについて知っていますが、自分自身をセットアップしたことはありません）。ご覧のとおり、2つのチェックボックスがチェックされ、チェックされていないチェックボックスが1つ表示されます。しかし、それらは解除不可能であり、状態を変更しないでください。また、入力の状態に基づいて表示されるのは1つだけです。

working fiddle

Answer 1

はここで起こって二つの問題があります。まず、CSSで後ろに行くことはできません。したがって、+演算子を使用する場合は、それらの要素を書いている順に並べる必要があります。あなたのコードは次のように書かれているので

：

input[type='checkbox'].icon-checkbox + label 

...あなたが物理的に兄弟のようにラベル上の入力フィールドを持っている必要があります。また、CSSを交換することもできます。

2番目の問題は、CSSの入力ミスです。

この行はスペースが不足してい

：

input[type='checkbox']:checked.icon-checkbox+ label.unchecked{display:none} 

...と次のようになります。

input[type='checkbox']:checked.icon-checkbox + label. unchecked{display:none} 

labelと.uncheckedの間のスペースがなければ、あなたのコードは、とラベルを探していますチェックされていないクラス、チェックされていないクラスの子

最後のコードは次のように機能します。

HTML：

<form style="display: block;" id="commentary_14"> 
    <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> 
    <label for="id_is_anonymous"> 
     <span classname="checkbox-label-text">Stay Anonymous</span> 
     <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span> 
     <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span> : 
    </label> 
    (...) 
</form> 

CSS：

input[type='button'].icon-checkbox { 
    display: none 
} 

input[type='checkbox'].icon-checkbox { 
    display: none; 
} 

input[type='checkbox'].icon-checkbox+label .unchecked { 
    display: inline-block; 
} 

input[type='checkbox'].icon-checkbox+label .checked { 
    display: none; 
} 

input[type='checkbox']:checked.icon-checkbox { 
    display: none 
} 

input[type='checkbox']:checked.icon-checkbox+ label .unchecked { 
    display: none 
} 

input[type='checkbox']:checked.icon-checkbox+ label .checked { 
    display: inline-block 
} 

JSfiddle例：https://jsfiddle.net/jennifergoncalves/eh21d8bd/

Answer 2

HTML

<form style="display: block;" id="commentary_14"> 
    <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> 
     <label for="id_is_anonymous"> 
      <span classname="checkbox-label-text">Stay Anonymous</span>    
      <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>    
      <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span> 
     :</label> 

(...)  
</form> 

CSS

input[type='checkbox'].icon-checkbox{display:none;} 

input[type='checkbox'].icon-checkbox+label .unchecked{display:inline-block;} 
input[type='checkbox'].icon-checkbox+label .checked{display:none;} 

input[type='checkbox'].icon-checkbox:checked+ label .unchecked{display:none} 
input[type='checkbox'].icon-checkbox:checked+ label .checked{display:inline-block} 

codepen link 希望この作品..

Answer 3

これを試してみてください：

input[type=checkbox] { 
 
    display: none; 
 
} 
 
input[type=checkbox] + label #unchecked { 
 
    display: inline-block; 
 
} 
 
input[type=checkbox] + label #checked { 
 
    display: none; 
 
} 
 
input[type=checkbox]:checked + label #unchecked { 
 
    display: none; 
 
} 
 
input[type=checkbox]:checked + label #checked { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form style="display: block;" id="commentary_14"> 
 
     <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> 
 
     <label for="id_is_anonymous"> 
 
      <span classname="checkbox-label-text">Stay Anonymous</span>:   
 
      <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18" id="unchecked"></span>    
 
      <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18" id="checked"></span> 
 
     </label> 
 
</form>