如何将div设置成复选框

I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color.

我最近开始编写代码，我想知道如何将一个盒子做成一个复选框。所以我想创建一个网站，用户可以选择颜色，通过检查颜色框来选择他们想要的颜色。我已经查过了，找不到好的答案。所有的框都应该是可点击的，因为用户可以选择多个颜色。

edit I'm sorry if I didn't make sense! What I'm trying to do is something like this: sv.tinypic.com/r/dcelb6/9. So the boxed are colored, and you can check them.

如果我没讲明白，我很抱歉!我想做的是这样的:sv.tinypic.com/r/dcelb6/9。所以盒装是彩色的，你可以检查一下。

Here is my html:

这是我的html:

<div>
          <a href="#" class="color-box black-box" value="0">
            <h3>Black</h3>
          </a>
        </div>
        <div>
          <a href="#" class="color-box grey-box" value="0">
            <h3>Grey</h3>
          </a>
        </div>
        <div>
          <a href="#" class="color-box blue-box" value="0">
            <h3>Blue</h3>
          </a>
        </div>

</div>

and here is the CSS:

这是CSS:

.color-box {
  width: 15.20833%;
  min-width: 15.20833%;
  height: 0;
  padding-bottom: 15.20833%;
  background-color: #fff;
  margin-top: 0.72917%;
  display: block;
  float: left;
  position: relative;
  margin: 7px 0.72917%;
  border: 1px solid transparent;
}

.color-box h3 {
  color: #fff;
  text-decoration: none;
}

.black-box {
  background: #000;
}

.grey-box {
  background: #9E9E9E;
}

.blue-box {
  background: #205DB1;
}

3 个解决方案

#1

where the user can choose colors by checking the colored boxes to pick the ones they want.

用户可以通过选中颜色框来选择他们想要的颜色。

snippet here

这里的片段

colors={'black-box':'black','grey-box':'grey','blue-box':'blue'}
var elements=document.getElementsByClassName('color-box')
function handler(el){
el[i].addEventListener('click',
function(e){
	if(e.target.className.split(' ')[1] in colors){
		document.getElementById('selector').style.background= 			colors[e.target.className.split(' ')[1]]
    }
   for(var i=0;i<elements.length;++i){
    if(elements[i]!=e.target){elements[i].innerHTML=''}
    }
e.target.innerHTML=='✓'?e.target.innerHTML='':e.target.innerHTML='✓';
},false)
}
for(var i=0;i<elements.length;++i){
handler(elements)
}

//document.getElementsByClassName('color-box').forEach(handler)

.color-box {
  color:white;
  font-size:20px;
  width:30px;
  height:30px;

  background-color: #fff;
  margin-top: 0.72917%;
  display: block;
  text-align:center;
  position: relative;
  border: 1px solid transparent;
}

.black-box {
  background: #000;
}

.grey-box {
  background: #9E9E9E;
}

.blue-box {
  background: #205DB1;
}
#selector{
  width:200px;
  height:200px;
  border:solid;
}

<div class="color-box black-box" >
        </div>
        <div class="color-box grey-box">
        </div>
        <div class="color-box blue-box">
        </div>
</div>
<div id='selector'>
</div>

#2

This is a basic example of how to implement it without JS https://plnkr.co/edit/tvamZjENZSLWnrtthDHP?p=preview

这是如何在没有JS https://plnkr.co/edit/tvamzjenzslwnrtthdhp?

<style>
.checkbox > input[type="checkbox"] {  display: none; }
.checkbox > input[type="checkbox"]:checked + label:before {margin-right: 10px; content: "[X]";}
.checkbox > input[type="checkbox"] + label:before {margin-right: 10px; content: "[ ]";}
</style>


<div class="checkbox">
  <input type="checkbox" id="test">
  <label for="test">HELLO</label>
</div>

Note that i'm using > to indicate the immediate checkbox element descendant of .checkbox element, and the + selector for getting the next LABEL element sibling of that input

注意，我正在使用>来指示.checkbox元素的立即复选框元素后代，以及获取该输入的下一个LABEL元素兄弟元素的+选择器

#3

This is a pure CSS one, using "hidden" radioset with their label colored

这是一个纯粹的CSS，使用“隐藏”的无线电集和他们的标签颜色

JS Fiddle

JS小提琴

.radios{
  display:none;
}
.color-box {
  width: 50px;
  line-height: 50px;
  margin-top: 0.72917%;
  display: inline-block;
  margin: 7px 0.72917%;
  color: #fff;
  text-align:center;
  text-decoration: none;
  border: 1px solid transparent;
}
.black-box {
  background: #000;
}
.grey-box {
  background: #9E9E9E;
}
.blue-box {
  background: #205DB1;
}
.radios:checked + label{
  text-decoration:underline;
}
#rad1:checked ~ #result{
  background-color:black;
}
#rad2:checked ~ #result{
  background-color:#9E9E9E;
}
#rad3:checked ~ #result{
  background-color:#205DB1;
}
#result{
  width:200px;
  height:200px;
  border:2px orange solid;
}

<div>
  <input type="radio" id="rad1" name="rad" class="radios">
  <label for="rad1" class="color-box black-box">Black</label>

  <input type="radio" id="rad2" name="rad" class="radios">
  <label for="rad2" class="color-box grey-box">Grey</label>

  <input type="radio" id="rad3" name="rad" class="radios">
  <label for="rad3" class="color-box blue-box">Blue</label>

  <hr>
  <div id="result"></div>
</div>

#1