JS-根据输入类型添加选择或选中的选项

问题描述 投票:0回答:1

遍历表单选项时,我会根据其值将其选项设置为默认值。

由于我同时具有选择和单选/复选框-有两种设置默认值的方式-已选择/选中。有什么方法可以使用纯JS进行简化-可以同时进行选择和检查吗?

if (param.type.select) {
          this.form.querySelector('[value="' + optionKey+'"]').selected = true;
        } else {
          this.form.querySelector('[value="' + optionKey+'"]').checked = true;
        }  
javascript forms
1个回答
0
投票

您可以将checked用于所有3种输入类型。观看此演示:

[...document.querySelectorAll("select option")][2].checked = true;
document.querySelector("input[value='cb3']").checked = true;
document.querySelector("input[value='r2']").checked = true;
document.addEventListener("change", showValues);

function showValues() {
  console.clear();
  console.log(`selected option: ${document.querySelector("select option:checked").value}`);
  document.querySelectorAll("input:checked").forEach(v => console.log(`${v.type}: ${v.value}`));
}
<select>
  <option>opt 0</option>
  <option value="1">opt 1</option>
  <option value="2">opt 2</option>
  <option value="3" selected>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
© www.soinside.com 2019 - 2024. All rights reserved.