使用JS控制单选框复选框和下拉框的回显

单选框和复选框的回显可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码：

<label for="option1">选项1</label>
<input type="radio" id="option1" name="options" value="1">

<label for="option2">选项2</label>
<input type="radio" id="option2" name="options" value="2">

<label for="option3">选项3</label>
<input type="checkbox" id="option3" name="options" value="3">

<label for="option4">选项4</label>
<input type="checkbox" id="option4" name="options" value="4">

我们可以通过以下 JavaScript 代码来实现单选框和复选框的回显：

// 获取单选框和复选框元素
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var option4 = document.getElementById("option4");

// 设置单选框和复选框的默认选中状态
option1.checked = true;
option3.checked = true;

// 监听单选框和复选框的变化，更新选中状态
option1.addEventListener("change", function() {
  option2.checked = false;
});

option2.addEventListener("change", function() {
  option1.checked = false;
});

option3.addEventListener("change", function() {
  option4.checked = false;
});

option4.addEventListener("change", function() {
  option3.checked = false;
});

这段代码首先获取了四个单选框和复选框的元素，并设置了选项1和选项3为默认选中状态。然后通过监听单选框和复选框的变化，更新其他选项的选中状态。

下拉框的回显也可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码：

<select id="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

我们可以通过以下 JavaScript 代码来实现下拉框的回显：

// 获取下拉框元素
var fruit = document.getElementById("fruit");

// 设置下拉框的默认选中状态
fruit.value = "banana";

// 监听下拉框的变化，更新选中状态
fruit.addEventListener("change", function() {
  if (fruit.value === "apple") {
    // do something
  } else if (fruit.value === "banana") {
    // do something
  } else if (fruit.value === "orange") {
    // do something
  }
});

这段代码首先获取了下拉框的元素，并设置了香蕉为默认选中状态。然后通过监听下拉框的变化，更新其他选项的选中状态。根据选中的值，可以执行不同的操作。