javascript - How to make a div into a checkbox - Stack Overflow

admin管理员组

文章数量:1415111

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/r/dcelb6/9. So the boxed are colored, and you can check them.

Here is my 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:

.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;
}

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./r/dcelb6/9. So the boxed are colored, and you can check them.

Here is my 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:

.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;
}

• javascript
• jquery
• html
• css
• checkbox

Share Improve this question Follow edited Jan 21, 2016 at 9:36 bellastic asked Jan 20, 2016 at 23:01 bellasticbellastic 4155 bronze badges 6

• You want something like this?jsfiddle/VvHwm – Randall Valenciano Commented Jan 20, 2016 at 23:08
• @bellastic, The munity wants to help you, and we are trying are best, but we can only understand questions that make sense. Try to format your question a bit differently after you check out StackOverflow's Help Center page on how to write a good question. – OneStig Commented Jan 20, 2016 at 23:10
• 3 @IMMLGPRO1337420 question seems pretty clear to me – charlietfl Commented Jan 20, 2016 at 23:26
• @charlietfl, yes the idea of making a checkbox is, but there are two other things. What specific type of style of checkbox does the OP want. And I don't understand why the OP has to create a checkbox with a div when you can create an input and set the type as a checkbox. – OneStig Commented Jan 20, 2016 at 23:29
• 1 @IMMLGPRO1337420 perhaps you don't understand, however it is mon practice these days for styling. Suggest ask for clarification from OP but overall others are understanding it also, In other word...try to not to speak for the munity...and just ask clarification question as yourself – charlietfl Commented Jan 20, 2016 at 23:32

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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>

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

<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

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

JS Fiddle

.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>

本文标签： javascriptHow to make a div into a checkboxStack Overflow