时间戳

首页 > 解决方案 > 使用 JS 创建 HTML 动态表单

javascript - 使用 JS 创建 HTML 动态表单

问题描述

我正在尝试使用 JS 和 PHP 创建一个动态表单，我已经完成了 PHP 部分，用户可以在其中选择他想要的行数，并且程序会生成该行数。JS 部分是仅在选中复选框时才显示 HTML 选择框。我使用以下函数完成了该操作：

var checkBox = document.getElementById("box");
function repeatedCheck(){
  if(checkBox.checked==true){
  document.getElementById('sel').innerHTML="<select name='sel'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  .
  .
  //more options ..
  </select>";}
  else{
    document.getElementById('sel').innerHTML="";
  }
}

这是由 PHP 程序生成的 HTML 部分：

<table>
<?php
    for($i=1;$i<=$numOfRows;$i++){
           echo "<tr>";
           echo "<td><input type='checkbox' id='box' name='repeated' onclick='repeatedCheck()'></td>";
           echo "<td id='sel'></td>";
           echo "</tr>";
       }
?>
</table>

问题是，选中复选框时没有任何显示。

标签： javascriptphphtmldynamic

解决方案

试试下面的。

您缺少输入事件，因此当用户更改复选框状态时，您的函数不会运行。

此外，我建议您select已经用 HTML 编写输入，而不是使用innerHTML. document.createElement()如果您需要动态更改选项，或者至少手动创建元素。

如果您有任何疑问，请告诉我。

const checkboxes = document.getElementsByClassName('checkbox');

function onChangeHandler(e){
  if (e.target.checked === true) {
    e.target.nextElementSibling.style.display = null;
  } else {
    e.target.nextElementSibling.style.display = 'none';
  }
}

for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', onChangeHandler);
}
<form>
  <div>
    <input class='checkbox' type='checkbox'></checkbox>
    <select name='select' style='display: none;'>
      <option value='1'>1</option>
      <option value='2'>2</option>
    </select>
  </div>
  
  <div>
    <input class='checkbox' type='checkbox'></checkbox>
    <select name='select' style='display: none;'>
      <option value='1'>1</option>
      <option value='2'>2</option>
    </select>
  </div>
</form>

推荐阅读