动态添加单选按钮标签- JavaScript

动态添加单选按钮标签是通过使用JavaScript在网页中实时生成单选按钮元素。这样可以动态地根据用户的需求在网页中添加、修改或删除单选按钮。

实现动态添加单选按钮标签的步骤如下：

创建一个容器元素，用来包含动态添加的单选按钮标签。例如，可以使用div元素作为容器。
使用JavaScript的createElement方法创建一个input元素，并设置其type属性为"radio"，以创建单选按钮。
设置input元素的其他属性，例如id、name、value和label等。
创建一个label元素，并将其内容设置为单选按钮的文本。
使用appendChild方法将input和label元素添加到容器元素中。
使用document.getElementById方法获取到要添加单选按钮的父元素，并将容器元素添加到该父元素中。

以下是一个示例代码，演示了如何使用JavaScript动态添加单选按钮标签：

// 创建单选按钮的函数
function createRadioButton(parentId, id, name, value, label) {
  // 获取父元素
  var parent = document.getElementById(parentId);
  
  // 创建容器元素
  var container = document.createElement("div");
  
  // 创建单选按钮元素
  var radioButton = document.createElement("input");
  radioButton.type = "radio";
  radioButton.id = id;
  radioButton.name = name;
  radioButton.value = value;

  // 创建标签元素
  var radioButtonLabel = document.createElement("label");
  radioButtonLabel.innerHTML = label;

  // 将单选按钮和标签添加到容器元素中
  container.appendChild(radioButton);
  container.appendChild(radioButtonLabel);

  // 将容器元素添加到父元素中
  parent.appendChild(container);
}

// 在id为"radioButtonContainer"的父元素中添加单选按钮
createRadioButton("radioButtonContainer", "radioButton1", "group", "option1", "Option 1");
createRadioButton("radioButtonContainer", "radioButton2", "group", "option2", "Option 2");

这段代码会在id为"radioButtonContainer"的父元素中添加两个单选按钮，它们的name属性相同，可以作为一个单选按钮组使用。

应用场景：