创建一个像HTML复选框一样的div [英] Create a div that acts like an html checkbox

问题描述

我想打开/关闭点击div（它应该像html复选框一样）并使用css进行可见的更改。这可能没有Javascript，或者我必须使用Javascript？

如果您已经创建了这样的脚本，请分享它。

感谢您提前给予帮助。 解决方案

复选框和样式标签如下所示：


HTML

 < div id =复选框> 
< input type =checkboxname =rGroupvalue =1id =r1checked =checked/> 
< label class =whateverfor =r1>< / label> 
< input type =checkboxname =rGroupvalue =2id =r2/> 
< label class =whateverfor =r2>< / label> 
< input type =checkboxname =rGroupvalue =3id =r3/> 
< label class =whateverfor =r3>< / label> 
< / div> 
  

CSS

  .whatever {
 background-color：red; 
 display：inline-block; 
 width：100px; 
 height：100px; 
} 
 
 #checkboxes input [type = checkbox] {
 display：none; 
} 
 
 #checkboxes input [type = checkbox]：checked + .whatever {
 background-color：green; 
 
 $ / code> 

你可以在这里看看这个简单的代码：

JSFiddle


希望这有助于！ ：）


I want to turn on/off the div on click (it should act like an html checkbox) and make visible changes using css. Is this possible without Javascript, or would I have to use Javascript?

If you have created such a script please share it.

Thank you for your help in advance.

解决方案

You could do this very easily with only CSS code by hiding the checkboxes and styling their labels like so:

HTML

<div id="checkboxes">
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" />
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" />
    <label class="whatever" for="r3"></label>
</div>

CSS

.whatever{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background-color: green;
}

You can take a look at this simple code in action here:
JSFiddle

Hope this helps! :)

这篇关于创建一个像HTML复选框一样的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！