CODEWITHSUNDEEP
javascriptpythonhtmlcssdjango
Jacobo Henao
Jacobo Henao

Reputation: 47

Generate different checkboxes inside a loop html

Right now i'm working in my first python - django project's front end, and i'm having some trouble with the table i'm using to show data from my db. The thing is that i wanted to put a checkbox at the first column of the table at every row, but since i don't know how many registers will there be, i created a checkbox on the first column inside the loop that i'm using to show the registers. And every checkbox of the table that i click makes reference to the checkbox thats on the first register of the table. (If i click the 3rd's row checkbox, it would check the first row's one, and if i click the 5th's row table, it would uncheck the first row's one.)

here is my code.

HTML:

{% for dominios in dominios %}
<tr style="height: -2px;">
  <td style="text-align:center;">
    <div class name="checkboxWrapper">
      <input type="checkbox" id="check" hidden="true" style="margin-top: 10px;" />
      <label for="check" class="checkmark"></label>
    </div>
  </td>
  <td style="color:#A9A9A9;">{{dominios.id_dom}}</td>
  <td style="color:#A9A9A9;">{{dominios.nombre_activo}}</td>
  <td style="color:#A9A9A9;">{{dominios.desc_act}}</td>
  <td style="color:#A9A9A9;">{{dominios.dat_cont_arch}}</td>
  <td style="color:#A9A9A9;">{{dominios.resp_dom}}</td>
  <td style="color:#A9A9A9;">{{dominios.estado}}</td>
{% endfor %}

So what i want to do is every checkbox unique, so i can select the register with the checkbox.

I hope someone can help me with this.

Thank you very much.

Upvotes: 1

Views: 515

Answers (1)

Tartempion34
Tartempion34

Reputation: 612

You can add a unique id for each checkbox for example using the unique id of the object appearing in the line:

{% for dominio in dominios %}
<tr style="height: -2px;">
  <td style="text-align:center;">
    <div class name="checkboxWrapper">
      <input type="checkbox" id="check{{dominios.id_dom}}" hidden="true" style="margin-top: 10px;" />
      <label for="check" class="checkmark"></label>
    </div>
  </td>
  <td style="color:#A9A9A9;">{{dominios.id_dom}}</td>
  <td style="color:#A9A9A9;">{{dominios.nombre_activo}}</td>
  <td style="color:#A9A9A9;">{{dominios.desc_act}}</td>
  <td style="color:#A9A9A9;">{{dominios.dat_cont_arch}}</td>
  <td style="color:#A9A9A9;">{{dominios.resp_dom}}</td>
  <td style="color:#A9A9A9;">{{dominios.estado}}</td>
{% endfor %}

As well change the "for" line. You can not use the same variable name after the for and after the in. I changed it on this code.

Upvotes: 1

Related Questions