How to put Dynamic id in checkbox in javascript?

Question

I am attaching my html code to a variable(ctableData) which I am again appending to the main container. Now I want to have dynamic id for the checkbox, So I am running a loop and incrementing the value of k in every iteration and then assigning the k as checkbox id. But this doesnt seem to be working?

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>
}

Try like [this](https://jsfiddle.net/w6sbha4L/). Also , read [this](https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation) post . — Swati, Apr 30 '21 at 05:48

score 2 · Accepted Answer · answered Apr 30 '21 at 05:49

Use a template string using backticks.

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>`
}

score 1 · Answer 2 · answered Apr 30 '21 at 05:52

The issue with your code is that you haven't used the value of k. You put k inside the string which does not evaluate to a loop variable. Use it just like you did for 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>
     }

score 1 · Answer 3 · answered Apr 30 '21 at 05:56

Try using template literals.

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>`
}

How to put Dynamic id in checkbox in javascript?

3 Answers3

Use a template string using backticks.