Checkbox next to JS array

Question

I have a function that prints a list from an array. I want the user to be able to select multiple different items in the array by using a checkbox next to them. How would I display a checkbox next to each array element? (Currently learning JS)

function par() {
  var courses = ["SDEV", "DBMS","INFM", "CSCI", "SVAD", "NETI", "ITSP", "CSIA"];
  var text = "";
  var i;
  for (i = 0; i < courses.length; i++) {
    text += courses[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

text += "<input type='checkbox' data-index='" + i + "'/>" + courses[i] + "<br>";! The data-index attribute will have the index of the item from the array! — ibrahim mahrir
– ibrahim mahrir, Commented Mar 15, 2017 at 23:43

Mouneer · Accepted Answer · 2017-03-16 00:03:26Z

2

function par(domEl) {
  var courses = ["SDEV", "DBMS","INFM", "CSCI", "SVAD", "NETI", "ITSP", "CSIA"];
  var text = "";
  var i;
  for (i = 0; i < courses.length; i++) {
    var checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.value = courses[i];
    domEl.appendChild(checkBox);

    var label = document.createElement("label");
    label.innerText = courses[i];
    domEl.appendChild(label);
  }
}

var domEl = document.body.querySelector('#myDiv')
par(domEl);

<form>
<div id="myDiv"></div>
<input type="submit"/>
</form>

edited Mar 16, 2017 at 0:03

answered Mar 15, 2017 at 23:44

Mouneer

13.5k3 gold badges37 silver badges46 bronze badges

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

Comments

undko · Accepted Answer · 2017-03-15 23:53:58Z

0

Your just missing code in your for loop to write checkbox markup:

text += '<label><input type="checkbox" value="' + courses[i] + '">' 
  + courses[i] + '</label><br>';

As you said you‘re learning JavaScript I invite you to embrace the functional style of doing stuff in JS:

function par() {
  var courses = ["SDEV", "DBMS","INFM", "CSCI", "SVAD", "NETI", "ITSP", "CSIA"];
  var text = courses.map(function(course) {
    return '<label><input type="checkbox" value="' + course + '">' + course + '</label>';
  }).join('<br>');
  document.getElementById("demo").innerHTML = text;
}
par();

<div id="demo"></div>

answered Mar 15, 2017 at 23:53

undko

9478 silver badges15 bronze badges

Comments

ajai Jothi · Accepted Answer · 2017-03-15 23:59:06Z

0

Checkbox names should be same. So that when submitting form you can read that as an array in serverside

function par() {
  var courses = ["SDEV", "DBMS", "INFM", "CSCI", "SVAD", "NETI", "ITSP", "CSIA"];
  document.getElementById("demo").innerHTML = courses.map(function(c){
    return '<label><input type="checkbox" name="courses" value="' + c + '" /> ' + c + '</label>';
  }).join('<br>');
}
par();

<div id="demo"></div>

edited Mar 15, 2017 at 23:59

answered Mar 15, 2017 at 23:53

ajai Jothi

2,3041 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Checkbox next to JS array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related