Set value of checkbox form element with an IF statement

Question

The below will be combined to automate the form questions that are repetitive (age, gender etc) using Chrome and a snippet.

So, I have this snippet where I save the value to the input text when the form is a text (input) based on an IF statement:

for (let i = 0; i <= 5; i++) {
  const inputElement = document.getElementById("sq" + i + "i");
  if (inputElement) {
    // Get specific attributes
    var type = inputElement.getAttribute("type");
    var id = inputElement.getAttribute("id");
    var aria_type = inputElement.getAttribute("aria-label");
    // Set a new value
    if (aria_type.includes("old are you")) {
      console.log(aria_type);
      inputElement.value = "26";
    }
  }
}

<div data-bind="css: question.koRootClass, style: { paddingLeft: question.koPaddingLeft, paddingRight: question.koPaddingRight, width: question.koRenderWidth }, attr: {id: question.id}" class="sv_q sv_qstn" id="sq1" style="width: 100%;">
  <div data-bind="css: {'title-left': question.hasTitleOnLeft}">
    <h5 data-bind="css: koCss().title" class="sv_q_title">
      <span style="position: static;" data-bind="text: koRenderedHtml">3. How old are you?</span>
    </h5>
    <div data-bind="visible: hasDescription, css: koCss().description" class="sv_q_description" style="display: none;">
      <span style="position: static;" data-bind="text: koRenderedHtml"></span>
    </div>
  </div>
  <div data-bind="css: {'content-left': question.hasTitleOnLeft}">
    <div role="alert" data-bind="visible: koErrors().length > 0, foreach: { data: koErrors, as: 'error'}, css: question.koCss().error.root" class="sv_q_erbox" style="display: none;"></div>
    <input data-bind="attr: {type: question.inputType, size: question.size, id: question.inputId, placeholder: question.inputType === 'range' ? undefined : question.placeHolder, maxLength: question.getMaxLength(), 'aria-label': question.locTitle.renderedHtml}, value:question.koValue, css: question.koCss().root"
      type="text" size="25" id="sq1i" placeholder="" aria-label="3. How old are you?" class="sv_q_text_root">
    <div class="form-group" data-bind="visible: question.hasComment" style="display: none;">

      <div data-bind="template: { name: 'survey-comment', data: {'question': question, 'visible': true } }">
        <input type="text" data-bind="value: $data.question.koComment, visible: $data.visible, css: question.koCss().other, attr: { maxLength: question.getOthersMaxLength(), 'aria-label': !!question.locTitle &amp;&amp; question.locTitle.renderedHtml }" aria-label="3. How old are you?">
      </div>
    </div>
  </div>
</div>

And then, I have this snippet where I am trying to set the answer in a form with checkboxes. I basically want to select the one I need and then submit the entire form:

for (let i = 0; i <= 2; i++) {
  const inputElement = document.getElementById("sq" + i + "i");
  // Get specific attributes
  if (inputElement) {
    var type = inputElement.getAttribute("type");
    var id = inputElement.getAttribute("id");
    var aria_type = inputElement.getAttribute("aria-label");
    //console.log(aria_type);
    // Set a new value
    if (aria_type.includes("gender")) {
      //inputElement.value = "Male";
      document.getElementById("sq" + i).value = "Male";
      console.log(document.getElementById("sq" + i).value);
    }
  }
}

<div data-bind="css: question.koRootClass, style: { paddingLeft: question.koPaddingLeft, paddingRight: question.koPaddingRight, width: question.koRenderWidth }, attr: {id: question.id}" class="sv_q sv_qstn" id="sq1" style="width: 100%;">
  <div data-bind="css: {'title-left': question.hasTitleOnLeft}">
    <h5 data-bind="css: koCss().title" class="sv_q_title">
      <span style="position: static;" data-bind="text: koRenderedHtml">What is your gender? </span>
    </h5>
    <div data-bind="visible: hasDescription, css: koCss().description" class="sv_q_description" style="display: none;">
      <span style="position: static;" data-bind="text: koRenderedHtml"></span>
    </div>
  </div>
  <div data-bind="css: {'content-left': question.hasTitleOnLeft}">
    <div role="alert" data-bind="visible: koErrors().length > 0, foreach: { data: koErrors, as: 'error'}, css: question.koCss().error.root" class="sv_q_erbox" style="display: none;"></div>
    <fieldset data-bind="css: question.koCss().root" class="sv_qcbc sv_qcbx">
      <div data-bind="css: question.getItemClass(item)" class="sv_q_checkbox sv-q-col-1">
        <label data-bind="css: question.koCss().label" class="sv_q_checkbox_label">
                <input type="checkbox" data-bind="attr: {name: question.name, value: item.value, id: ($index() == 0) ? question.inputId : '', 'aria-label': question.locTitle.renderedHtml }, checked: question.koValue, enable: !question.koIsReadOnly(), css: question.koCss().itemControl" name="question2" value="item1" id="sq1i" aria-label="What is your gender? " class="sv_q_checkbox_control_item">
                <span data-bind="css: question.koCss().materialDecorator" class="checkbox-material">
                    <span class="check"></span>
                </span>
                <span data-bind="css: question.koCss().controlLabel" class="sv_q_checkbox_control_label">

    <span style="position: static;" data-bind="text: koRenderedHtml">Male </span>
                </span>
            </label>
      </div>
      <div data-bind="css: question.getItemClass(item)" class="sv_q_checkbox sv-q-col-1">
        <label data-bind="css: question.koCss().label" class="sv_q_checkbox_label">
                <input type="checkbox" data-bind="attr: {name: question.name, value: item.value, id: ($index() == 0) ? question.inputId : '', 'aria-label': question.locTitle.renderedHtml }, checked: question.koValue, enable: !question.koIsReadOnly(), css: question.koCss().itemControl" name="question2" value="item2" id="" aria-label="What is your gender? " class="sv_q_checkbox_control_item">
                <span data-bind="css: question.koCss().materialDecorator" class="checkbox-material">
                    <span class="check"></span>
                </span>
                <span data-bind="css: question.koCss().controlLabel" class="sv_q_checkbox_control_label">

    <span style="position: static;" data-bind="text: koRenderedHtml">Female  </span>

                </span>
            </label>
      </div>
      <div data-bind="css: question.getItemClass(item)" class="sv_q_checkbox sv-q-col-1">
        <label data-bind="css: question.koCss().label" class="sv_q_checkbox_label">
                <input type="checkbox" data-bind="attr: {name: question.name, value: item.value, id: ($index() == 0) ? question.inputId : '', 'aria-label': question.locTitle.renderedHtml }, checked: question.koValue, enable: !question.koIsReadOnly(), css: question.koCss().itemControl" name="question2" value="item3" id="" aria-label="What is your gender? " class="sv_q_checkbox_control_item">
                <span data-bind="css: question.koCss().materialDecorator" class="checkbox-material">
                    <span class="check"></span>
                </span>
                <span data-bind="css: question.koCss().controlLabel" class="sv_q_checkbox_control_label">
    <span style="position: static;" data-bind="text: koRenderedHtml">Neither of the above</span>
                </span>
            </label>
      </div>
      <legend style="display: none;" data-bind="text: question.locTitle.renderedHtml">What is your gender? </legend>
    </fieldset>
    <!-- /ko -->
    <div class="form-group" data-bind="visible: question.hasComment" style="display: none;">
      <div data-bind="text:question.commentText">Other (describe)</div>
      <div data-bind="template: { name: 'survey-comment', data: {'question': question, 'visible': true } }">
        <input type="text" data-bind="value: $data.question.koComment, visible: $data.visible, css: question.koCss().other, attr: { maxLength: question.getOthersMaxLength(), 'aria-label': !!question.locTitle &amp;&amp; question.locTitle.renderedHtml }" class="sv_q_other sv_q_checkbox_other"
          aria-label="What is your gender? ">
      </div>
    </div>
  </div>
</div>

where I notice that the

inputElement.value = "Male";

does not return "Male" and this works fine:

document.getElementById("sq" + i).value = "Male";

However, even if the console log return is correct, I want to make sure that this is going to set the value in this form. It was way easier when I just had to find the answer I wanted in a checkbox and then set it to checked = true