造型未选中的复选框（带引导程序）

我尝试使用引导样式以简单形式对复选框进行样式设置，如果选中或取消选中，则基于条件。然而，由于某些原因，它不起作用。带有造型的跨度元素不会收到检查和未检查状态的样式。请注意，这种形式在页面上多次重复，与输入元素保持相同的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

造型未选中的复选框（带引导程序）

回答

相关问题