Add a class to each element within an array?

Question

I'm looking to add a class to each element within an array I have using pure javascript only. My need for this is because I the application I have gives me 'very' limited html editing capability.

My Goal

" Is to emulate radio buttons by using checkboxes. "

To do this I need to add a uniqe class handle to all the elements I want to target, as not to pick up any other elements by mistake. Only then can I start manipulating thier behavior.

Essentially what I realise I need is to loop - // .classList.add("chkbox"); through the array applying .chkbox to each of the elements within it.

The only issue is, I'm unsure of the best way to do this. I've done some digging around and couldn't find anything that really matched what I'm looking for. "However, I did find this handy dandy post here about arrays!"

I think I understand how to loop through an array, but how do I target the elements within individually?

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

console.log(a);
console.log(b);

// .classList.add("classToBeAdded");

JS FIDDLE

I'm not too saavy with JS so any help I could get with this issue would be awesome, and I'll give my thanks in advance.

Regards, - B.

NOTE 04 Oct:

classList.add('class') isn't supported by all browsers indeed. The element.setAttribute('class', 'here_the_class'); is better supported.

– Camille Sébastien Niessen

NOTE 05 Oct:

For those that find this thread in passing, if you're interested in the finished result, you can find an updated Jsfiddle here.

– Beaniie

sorry, just to clarify, why can't you just use actual radiobuttons? — ADyson, Oct 04 '17 at 14:04
Add class before pushing to array: `a[i].classList.add('classToBeAdded'); b.push(a[i]);` — dfsq, Oct 04 '17 at 14:04
@ADyson great question, it's the application I'm using it doesn't provide usability for them. I.e I can add checkboxes to my project but not radio buttons as there is no option to. :\ — Lewis, Oct 04 '17 at 14:05
Um...huh? HTML's had radio buttons **forever**. What kind of application are you using that doesn't support them? — T.J. Crowder, Oct 04 '17 at 14:05
*"To do this I need to add a uniqe class handle to all the elements I want to target, as not to pick up any other elements by mistake. Only then can I start manipulating thier behavior."* Not necessarily. You can group them by name, identify them by value, ... — T.J. Crowder, Oct 04 '17 at 14:06
@T.J.Crowder, It's an Java applet called Coreprint. It's built by a company called Vpress and it's in it's younger stages of development. — Lewis, Oct 04 '17 at 14:07
Euh, won't it break really soon since java applets are being phased out in all browsers? — Shilly, Oct 04 '17 at 14:12
@shily, from what I understand it's being rebuilt at this time. But this is what I have for now... "The print industry is far behind, digitially speaking. Honestly it's like being back in 98." — Lewis, Oct 04 '17 at 14:14

score 1 · Accepted Answer · answered Oct 04 '17 at 14:06

This should do it

[].forEach.call(b, function(el) {
    el.classList.add("chkbox");
});

Snippet with your code:

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

[].forEach.call(b, function(el) {
 el.classList.add("chkbox");
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}

h3 {
  color: #fff !important;
  padding-left: 0 !important;
}

#txt-field {
  position: relative;
  height: 100vh;
}

#col {
  width: 40%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  margin-bottom: .5em;
}

.original {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(http://imageshack.com/a/img661/3954/bwalqa.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.txt {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  font-size: 26px !important;
  text-transform: uppercase;
  color: #272727;
  padding: .5em;
}

.stretch {
  box-sizing: border-box;
  width: 100%;
}

.shift {
  margin-top: 9%;
}

.boxes {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  padding: 1.5em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  margin-top: 1.5em;
}


/*Checkboxes styles*/

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

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="txt-field" class="original box">

  <div id="col">

    <h3 class="txt spacer">Checkboxes acting like radio buttons...</h3>

    <div class="boxes">
      <input type="checkbox" id="box-1" checked>
      <label for="box-1">Option One</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-2">
      <label for="box-2">Option Two</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-3">
      <label for="box-3">Option Three</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-4">
      <label for="box-4">Option Four</label>
    </div>
  </div>
</div>

Camille Sébastien Niessen · Answer 2 · 2017-10-04T14:33:05.950

1

You can add the classlist inside the for loop like this:

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    a[i].setAttribute("class", "classToBeAdded"); 
    b.push(a[i]);
  }
};

Tested it in your Fiddle and it seems to work

edited Oct 04 '17 at 14:33

answered Oct 04 '17 at 14:06

Camille Sébastien Niessen

1,282
14
28

1

This seems clean but judging by your answer, how do you think it will hold up across different/older browsers? – Lewis Oct 04 '17 at 14:28
1

classList.add('class') isn't supported by all browsers indeed. The element.setAttribute('class', 'here_the_class'); is better supported – Camille Sébastien Niessen Oct 04 '17 at 14:32

pciang · Answer 3 · 2017-10-04T14:24:56.717

The logic is quite simple. When a checkbox is checked, you can loop through the list of checkboxes to uncheck them. Then, check the clicked checkbox.

Edit: Not sure what you want to do with chkbox class. If you want to select checked checkbox with CSS, you can use CSS pseudo-class selector :checked. Example:

.boxes > input[type="checkbox"]:checked {
  /* CSS here */
}

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

b.forEach(function (el) {
  el.addEventListener("change", function (ev) {
    b.forEach(function (innerEl) {
      innerEl.removeAttribute("checked");
    })
    el.setAttribute("checked", "checked");
  })
})

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}

h3 {
  color: #fff !important;
  padding-left: 0 !important;
}

#txt-field {
  position: relative;
  height: 100vh;
}

#col {
  width: 40%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  margin-bottom: .5em;
}

.original {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(http://imageshack.com/a/img661/3954/bwalqa.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.txt {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  font-size: 26px !important;
  text-transform: uppercase;
  color: #272727;
  padding: .5em;
}

.stretch {
  box-sizing: border-box;
  width: 100%;
}

.shift {
  margin-top: 9%;
}

.boxes {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  padding: 1.5em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  margin-top: 1.5em;
}


/*Checkboxes styles*/

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

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="txt-field" class="original box">

  <div id="col">

    <h3 class="txt spacer">Checkboxes acting like radio buttons...</h3>

    <div class="boxes">
      <input type="checkbox" id="box-1" checked="checked">
      <label for="box-1">Option One</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-2">
      <label for="box-2">Option Two</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-3">
      <label for="box-3">Option Three</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-4">
      <label for="box-4">Option Four</label>
    </div>
  </div>
</div>

The reason I'm adding a class is for peace of mind, I have no control over the `id, name, value, + attributes.` so I'm adding a unique handler for elements I want to target as there are other elements besides checkboxes within the project too I.e. Text areas, Text Fields etc. — Lewis, Oct 04 '17 at 14:26

Add a class to each element within an array?

3 Answers3