loop to check combination of dropdown & checkbox in pure javascript

Here is a solution taking advantage of the options indexes matching the itteration of the string. It takes the index of the selected option and changes the string accordingly while concatenating the values from selected checkboxes.

let dateUTC = new Date(); 
let todayUTC = dateUTC.getUTCFullYear() + '-' + (('0' + dateUTC.getUTCMonth()+1)).slice(-2) + '-' + ('0' + dateUTC.getUTCDate()).slice(-2);

const select = document.querySelector("#hourSelectorID");
const allCheckboxes = document.querySelectorAll('input[name="chkBox"]');
const elements = [select, ...[...allCheckboxes]];

elements.forEach(el => {
  el.addEventListener("change", () => {
    let checkedValues = []
    const checked  = [...allCheckboxes].filter(cb => cb.checked);
    checked.forEach(cb => checkedValues.push(cb.value))
    console.log(`created>" ${todayUTC} T0${select.selectedIndex}:00:00Z" created<" ${todayUTC} T0${select.selectedIndex+1}:00:00Z" ${checkedValues.join(' ')}`)   
  });
});

<select name="hourSelector" id="hourSelectorID">
  <option value="utcValue0">0 - 1 UTC</option>
  <option value="utcValue1">1 - 2 UTC</option>
  <option value="utcValue2">2 - 3 UTC</option>
  <option value="utcValue3">3 - 4 UTC</option>
  <option value="utcValue4">4 - 5 UTC</option>
  <option value="utcValue5">5 - 6 UTC</option>
</select>

<input value="whatever" type="checkbox" name="chkBox" class="custom-control-input" id="gameCheck">
<input value="otherwhatever" type="checkbox" name="chkBox" class="custom-control-input" id="purchCheck">
<input value="morewhatver" type="checkbox" name="chkBox" class="custom-control-input" id="inputCheck">

You have changed your question so I'm not sure with what follows. Drop a comment below for adjustments or questions :-)

var formEl = document.getElementById("form");
var selectEl = document.getElementById("hourSelectorID");
var checkboxEls = Array.prototype.slice.call(
  document.getElementsByClassName("custom-control-input")
);

// option elements

for (let i = 0; i < 24; i++) {
  let optionEl = document.createElement("option");
  optionEl.value = "utcValue" + i;
  optionEl.textContent = i + " - " + (i + 1) + " UTC";
  selectEl.appendChild(optionEl);
}

// form submit

formEl.addEventListener("submit", function (ev) {
  ev.preventDefault();
  console.log(toStringStuff());
});

// rename as needed :-)

function toStringStuff () {
  var now = Date.now(); // in ms
  var hourInMs = 1000 * 60 * 60;
  var dayInMs = hourInMs * 24;
  var today = now - now % dayInMs; // `now` with time set to 0
  var i = selectEl.selectedIndex; // hours to add to `today`
  var dt0 = new Date(today + i * hourInMs).toISOString();
  var dt1 = new Date(today + (i + 1) * hourInMs).toISOString();
  var utc = 'created>"' + dt0 + ' ' + 'created<"' + dt1;
  return [utc].concat(checkboxEls.filter(
    function (el) { return el.checked; }
  ).map(
    function (el) { return el.value; }
  )).join(" ");
}

<form id="form">
  <select
    id="hourSelectorID"
    name="hourSelector"
  ></select>
  <label><input
    id="gameCheck"
    type="checkbox"
    class="custom-control-input"
    value="gameTag"
    checked
  > Game Check</label>
  <label><input
    id="purchCheck"
    type="checkbox"
    class="custom-control-input"
    value="purchTag"
    checked
  > Purch Check</label>
  <input type="submit">
</form>

loop to check combination of dropdown & checkbox in pure javascript

Related

Recent Posts