Create Checkbox with Javascript

Question

I am trying to create a checkbox with javascript when a button is clicked. I am really struggling, I have searched the net for help and this is the closest I've got but it does not work.

What have I done wrong?

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="check" name="checkBoxes">
<script>
function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array( )
    check_value[0] = "Yellow"
    check_value[1] = "Red"
    check_value[2] = "Green"


   for(var count in check_value)
    {
      var color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      ColorsAvailable.appendChild(color);
   }
}

</script>

Ivan86 · Accepted Answer · 2018-01-02 01:53:01Z

2

After you add an element that has an id of checkBoxes and some semicolons ; the code actually works.

function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array();
    check_value[0] = "Yellow";
    check_value[1] = "Red";
    check_value[2] = "Green";

    var color, p, br;

   for(var count in check_value)
    {
      color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      p =document.createElement("span");
      p.innerHTML = check_value[count] + ": ";
      br =document.createElement("br");
      ColorsAvailable.appendChild(p);
      ColorsAvailable.appendChild(color);
      ColorsAvailable.appendChild(br);
   }
}

input[type='checkbox']
{
   margin-right:20px;
}

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="check" name="checkBoxes">

<div id="checkBoxes"></div>

edited Jan 2, 2018 at 1:53

answered Jan 2, 2018 at 1:04

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Suds Over a year ago

Excellent! A few little changes :) The checkboxes appear on the same line and don't have the text visible (ie yellow, red, green) so they know what the checkboxes are for.... any advice

Ivan86 Over a year ago

@Nadine Ok, I edited to show the labels. I also added a margin-right on the checkboxes for better readability.

Ivan86 Over a year ago

@Nadine Did you want the checkboxes to appear one above of the other? If so it's an easy fix.

Suds Over a year ago

@ Ivan86 Thanks for that, and yes I did want them one above the other.

Suds Over a year ago

@ Ivan86. Exactly what I was after. Thanks

|

mdatsev · Accepted Answer · 2018-01-02 01:03:07Z

The id of the input was check and not checkBoxes. I changed it and also you can't directly append in the input so I made it append in the parent node but you could change to be on another place.

<p>Click the buttons to create a Checkbox.</p>

<button onclick="addCheckBox()">Create a button</button>
<input id="checkBoxes" name="checkBoxes">
<script>
function addCheckBox() {

    var ColorsAvailable = document.getElementById('checkBoxes');
    var check_value = new Array( )
    check_value[0] = "Yellow"
    check_value[1] = "Red"
    check_value[2] = "Green"


   for(var count in check_value)
    {
      var color=document.createElement("input");   
      color.value=(check_value[count] + '</br>');
      color.type="checkbox";
      color.id="color" + count;
      ColorsAvailable.parentNode.appendChild(color);
   }
}

</script>

Ctznkane525 · Accepted Answer · 2018-01-02 01:02:26Z

0

Make checkboxes a DIV.

<div id="check" name="checkBoxes"></div>

and change this

var ColorsAvailable = document.getElementById('check');

answered Jan 2, 2018 at 1:02

Ctznkane525

7,5453 gold badges19 silver badges41 bronze badges

Collectives™ on Stack Overflow

Create Checkbox with Javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related