Question

我在选项列表上有一个值数组，当用户选择时，将进行动态复选框。当用户选中该复选框时，它将显示该复选框及其文本框的值。如何基于选项列表和动态复选框以及复选框的值显示动态文本框？

这是所创建程序的片段。无法基于复选框（条件）和选项列表（模型）以及复选框值（条件）创建动态文本框（称为“数量”）。而且我也无法删除条件中的复选框。它应该只显示复选框值

请帮助。急需

var mappingData = {
  "model-A": {
    "destination": ["Destination A1", "Destination A2", "Destination A3"],
    "criteria": ["Criteria A1", "Criteria A2", "Criteria A3"]
  },
  "model-B": {
    "destination": ["Destination B1", "Destination B2", "Destination B3"],
    "criteria": ["Criteria B1", "Criteria B2", "Criteria B3"]
  }
};

function populate(model, destination) {
  var mod = document.getElementById('model');
  var des = document.getElementById('destination');
  var criteria = document.getElementById('criteria');
  des.innerHTML = "";
  criteria.innerHTML = "";
  mappingData[mod.value].destination.forEach(function(item) {
    createCheckBox(item, des)
  });
  mappingData[mod.value].criteria.forEach(function(item) {
    createCheckBox(item, criteria)
  });
}

function createCheckBox(value, parent) {
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = value;
  checkbox.value = value;

  var label = document.createElement('label')
  label.htmlFor = value;
  label.appendChild(document.createTextNode(value));

  parent.appendChild(checkbox)
  parent.appendChild(label)
  parent.appendChild(document.createElement("br"))
}

<!DOCTYPE html>
<html>

<body>
  Model:
  <select id="model" name="model" onchange="populate(this.id, 'destination')">
    <option value="select">--Select Model--</option>
    <option value="model-A">Model-A</option>
    <option value="model-B">Model-B</option>
  </select>
  <hr /> Destination:
  <div id="destination"></div>
  <hr /> Criteria:
  <div id="criteria"></div>
  <hr />
</body>

</html>

Answer 1

首先，我认为您需要一个radio按钮列表而不是checkbox列表-您只希望选择一个按钮，对吧？

第二，您需要在单选按钮上添加一个click事件处理程序，以便用户单击它们时，您可以使用代码在下面创建文本框并显示值：

 var radioBox= document.createElement("input");
  radioBox.type = "radio";
  radioBox.name = "radio"; // radio boxes must have same name to Work as a Group
  radioBox.onclick = "createTextBox()";

在'createTextBox'中，添加动态文本框

如何基于javascript

1 个答案: