造型未選中的複選框（帶引導程序）

我嘗試使用引導樣式以簡單形式對複選框進行樣式設置，如果選中或取消選中，則基於條件。然而，由於某些原因，它不起作用。帶有造型的跨度元素不會收到檢查和未檢查狀態的樣式。請注意，這種形式在頁面上多次重複，與輸入元素保持相同的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，謝謝你（我知道關於小提琴但是從來沒有自己設定過）。正如你所看到的，兩個複選框出現一個被選中，一個被選中。然而，它們是不可點擊的，不要改變狀態，而且根據輸入的狀態，只有一個應該出現。

working fiddle

來源

2017-06-15 Stefan

我加入你的代碼到的jsfiddle： [https://jsfiddle.net/jennifergoncalves/988afrxk/](https://jsfiddle.net/jennifergoncalves/988afrxk/）這就是你所看到的？ –

是的，並且該複選框不可點擊......也只有一個框應顯示，具體取決於狀態。感謝您的小提琴:-) – Stefan

有這裏發生了兩個問題。首先，你不能在CSS中倒退。因此，當您使用+運算符時，您必須按照您編寫它們的順序來準備元素。

因爲你寫你這樣的代碼：

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

...你需要有物理標籤作爲同級上面輸入字段。或者，你可以交換你的CSS。

第二個問題是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/

來源

2017-06-15 11:16:51

您能否提供一個如何交換CSS選擇器的例子？我不控制輸入和標籤注入，並且我對css也不是很好，正如你所看到的:-) – Stefan

我被一個CSS解決方案難住了。你允許使用JS嗎？如果是這樣，我創建了一個新的JSfiddle：https：//jsfiddle.net/jennifergoncalves/Ldxzd7tb/ –

沒關係，我做了一個醜陋的黑客與jquery刪除和預計標籤和輸入按預期的順序...不漂亮，但工程。謝謝你的努力！ – Stefan

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 希望這個作品..

來源

2017-06-15 11:13:30

試試這個：

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>

來源

2017-06-15 12:28:57

造型未選中的複選框（帶引導程序）

回答

相關問題