在HTML（JavaScript、Python、Flask）中选中复选框时，将显示Upload Zip字段

2024-10-03 23:20:37 发布

您现在位置：Python中文网/ 问答频道 /正文
8963 3

我创建了一个HTML页面，其中有3个复选框。 我已经为每个复选框设置了3个不同的输入字段，当3个复选框中的任何一个被选中或所有复选框都被选中时出现，当复选框被取消选中时消失。 现在，除了输入字段，我还想在每个复选框下添加Upload Zip文件夹，这些复选框在单独选中时会显示，方式与输入字段的显示方式相同。我希望在选中复选框时，输出应该包括Upload Zip folder（Upload Zip Field）选项，如输入字段（1 2 3，A B C，D E F）

<!doctype html>
<html>
   <body>
    <title>Upload Zip Folder</title>

        <input type="checkbox" name="fruit1" onclick="dynInput(this);" /> Hi


        <input type="checkbox" name="fruit2" onclick="dynInput2(this);" /> Hello

        <input type="checkbox" name="fruit3" onclick="dynInput3(this);" /> Bye
        <p id="insertinputs"></p>
        <script type="text/javascript">
function dynInput(cbox) {
  if (cbox.checked) {

    var input = document.createElement("input");
    input.type = "float";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "1: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "2: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "3: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();

  }
}
function dynInput2(cbox) {
  if (cbox.checked) {
    var input = document.createElement("input");
    input.type = "float";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "A: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "B: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "C: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();

  }
}
function dynInput3(cbox) {
  if (cbox.checked) {
    var input = document.createElement("input");
    input.type = "float";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "D: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "E: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
    var input = document.createElement("input");
    input.type = "number";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "F: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();
    document.getElementById(cbox.name).remove();

  }
}

</script>




        <p><input type="submit" value="Submit"></p>
    </form>
   </body>
</html>

Tags： namedividinputvartypedocumentremove
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐