How to make a function in Vanilla JS that puts checked attribute to the radio inputs before the selected input?

Question

I can't find solution for this one.

Need to put attribute checked on the inputs that are before the selected input with JavaScript and the inputs after it unchecked.

UPD: changed the input type to the "checkbox" and now I need a function that marks "checked" the checkboxes before the last checked one, while unchecking succeeding boxes in case they were checked before.

Note: The solution has to use ES5 compatible syntax.

With code examples, please !

<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">

Answer 1

Then, my friend, it can be as simple as this:

// checkbox elements
var boxes = document.getElementsByName('toggle');

// function to bind to each of the input tags' change event
function markPreceding() {

  // retrieve the value from the clicked input
  var curIndex = this.value;

  // iterate through every single checkbox named toggle
  for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
    // if data-index is lower or equal to curIndex, then true; else, false
    box.checked = box.value <= curIndex;
  }

}

// add function to the onchange handler of each input
for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
  box.onchange = markPreceding;
}

<input type="checkbox" id="product-1" name="toggle" value="1">
<input type="checkbox" id="product-2" name="toggle" value="2">
<input type="checkbox" id="product-3" name="toggle" value="3">
<input type="checkbox" id="product-4" name="toggle" value="4">
<input type="checkbox" id="product-5" name="toggle" value="5">

Notes

I stored each of the checkboxes' index using data attributes.

I could have used the value property, for instance. I preferred using data attributes because you might want to use value for something else. It's your call. (see bottom of the post)

We can retrieve each attribute data-index from the HTML view in JavaScript with .dataset.index. It could've been any other name instead of "index". Just remember that if you're using multiple words, such as data-my-custom-prop in HTML, you have to call it in JS as .dataset.myCustomProp (they get camelCased).

The .checked property stores a boolean anyways, so you can pass the comparison box.dataset.index <= curIndex that will evaluate to either true or false, respectfully checking or unchecking the box.

EDIT: Since you asked in the comments, I tried converting it to ES5 compatible syntax. I stopped using data attributes, for one thing, and I retrieved the input value with the this keyword, not event.target (maybe I didn't need to change this, but I get the impression that was more common back in the day).