JS - добавить выбранные или отмеченные в зависимости от типа ввода

Question

При итерации параметров формы я устанавливаю для них значение по умолчанию в зависимости от их значения.

Поскольку у меня есть как select, так и radio / checkboxes - есть два способа установки значений по умолчанию - selected / checked. Есть ли способ упростить с чистым JS - который получит и выбор, и проверку?

if (param.type.select) {
          this.form.querySelector('[value="' + optionKey+'"]').selected = true;
        } else {
          this.form.querySelector('[value="' + optionKey+'"]').checked = true;
        }  

Answer 1

Вы можете использовать checked для всех 3 типов ввода . Вы можете использовать checked для всех 3 типов ввода для чтения выбранного или отмеченного значения. Для установки выбранной опции необходим атрибут selected.

// method to set selected or checked
const setSelected = (el, isSelect) => el[isSelect ? "selected" : "checked"] = true;

// initializing values for select, checkboxes and radio buttons
['3', 'cb3', 'r2'].forEach( v => {
  const elem = document.querySelector(`[value='${v}']`);
  elem && 
    (['checkbox', 'radio'].find(v => elem.type === v) ||
      elem.parentNode.options) && 
    setSelected(elem, elem.parentNode.options);
});

// add change handler
document.addEventListener("change", showValues);

function showValues() {
  console.clear();
  console.log(`selected option value: ${
    document.querySelector("select option:checked").value}`);
  document.querySelectorAll("input:checked")
    .forEach( v => console.log(`value of checked ${v.type}: ${v.value}`) );
}

<select>
  <option>opt 0</option>
  <option value="1">opt 1</option>
  <option value="2">opt 2</option>
  <option value="3">opt 3</option>
<select>
<p>
<input type="checkbox" value="cb1">cb 1
<input type="checkbox" value="cb2">cb 2
<input type="checkbox" value="cb3">cb 3
</p>
<input type="radio" name="x" value="r1"> r1
<input type="radio" name="x" value="r2"> r2
<input type="radio" name="x" value="r3"> r3