如何在javascript中将动态ID放在复选框中？

Posted 2023-05-08

【中文标题】如何在javascript中将动态ID放在复选框中？

【英文标题】：How to put Dynamic id in checkbox in javascript?

【发布时间】：2021-07-23 11:51:34

【问题描述】：

我将我的 html 代码附加到一个变量（ctableData），我再次将其附加到主容器。 现在我想为复选框设置动态 id，所以我正在运行一个循环并在每次迭代中增加 k 的值，然后将 k 分配为复选框 id。但这似乎不起作用？

for(let k =1; k< x.length; k++)
ctableData += '<div class="table_container"><table id="table1" class="checkboxdiv"><tbody><tr><th>'+plan[0].medicalPlans[i].brokerName+' <input type="checkbox" id= k name="table1" value="table1" onchange="myFunction(event)"> </th></tr>

【问题讨论】：

使用模板字符串。

试试this。另外，请阅读this 帖子。

【参考方案1】：

使用带有反引号的template string。

for(let k =1; k< x.length; k++)
ctableData += `<div class="table_container">
    <table id="table1" class="checkboxdiv">
      <tbody>
        <tr>
          <th>'+plan[0].medicalPlans[i].brokerName+' 
            <input type="checkbox" id=$k name="table1" value="table1" onchange="myFunction(event)" /> 
          </th>
        </tr>
      </tbody>
      </table>
    </div>`

【参考方案2】：

您的代码的问题是您没有使用 k 的值。您将 k 放在不计算为循环变量的字符串中。就像你对plan[0].medicalPlans[i].brokerName 所做的那样使用它：

 for (let k = 1; k < x.length; k++) 
  ctableData += '<div class="table_container">
                   <table id="table1" class="checkboxdiv"><tbody><tr><th>' 
                  + plan[0].medicalPlans[i].brokerName + ' 
                    <input type="checkbox" id=' + k + ' name="table1" 
                   value="table1" onchange="myFunction(event)"> </th></tr>
     

【参考方案3】：

尝试使用模板文字。

for(let k =1; k< x.length; k++)
ctableData += 
`<div class="table_container">
     <table id="table1" class="checkboxdiv">
         <tbody>
             <tr>
                 <th>'+plan[0].medicalPlans[i].brokerName+'
                    <input type="checkbox" id=$k name="table1" value="table1" 
                    onchange="myFunction(event)"> 
                 </th>
             </tr>
         <tbody>
     <table>
</div>`