Having trouble setting a checkbox using jquery

Question

I have a table whose rows are dynamically generated. The general structure is as follows:

<table id="table1">
 <thead></thead>
 <tbody>
   <tr>
    <td>Cell value 1</td>
    <td>Cell value 2</td>
    <td>Cell value 3</td>
    <td>
     <input type="checkbox" id="checkbox1" value="value1>
     <input type="checkbox" id="checkbox2" value="value2>
    </td>
   </tr>
   <tr>
    <td>Cell value 4</td>
    <td>Cell value 5</td>
    <td>Cell value 6</td>
    <td>
     <input type="checkbox" id="checkbox1" value="value1>
     <input type="checkbox" id="checkbox2" value="value2>
    </td>
   </tr>
 </tbody>
</table>

Based on the value(s) in one of the (the third one to be precise), I am trying to check/uncheck the checkboxes. My script for the same is:

$('#table1 tbody tr').each(function(){
 var cellValue = $(this).find("td").text();
 if (cellValue=='someValue'){
  $('#checkbox1).prop('checked',true);
 }
});

The issue i'm facing is that, since the rows are dynamically generated so during that iteration, I can't get that specific set of checkboxes. Like the example above, during first iteration i'm setting checkbox1 and that's working but during second iteration, i'm trying to set checkbox2 in the second row but the checkbox2 in the first row is getting set. Any help/pointers will be highly appreciated. Thanks.

IDs should be unique consider using classes instead and, use the relative positioning of the checkboxes to select the correct checkboxes. — PeterKA, Jul 16 '20 at 01:26
Also remember that `$(this).find('td').text()` returns the text from all `td` child elements of the `tr` (`this`) combined into one string. I suspect this is not what you intended. — PeterKA, Jul 16 '20 at 01:53
jQuery is a bit new for me. I'm getting the impression that classes are more useful here than ids. Thank you for the help! — Anirban Chatterjee, Jul 16 '20 at 02:06

score 1 · Accepted Answer · answered Jul 16 '20 at 02:02

You get the third td by using .eq(2) and then to target the correct checkbox you can use:

$('.checkbox1', this)... //OR
$(this).find('.checkbox1')....

Depending on what your conditional statements are they may be combined into one by using the array .includes() method as in the demo below:

$('#table1 tbody tr').each(function() {
    var cellValue = $(this).find("td").eq(2).text();
    console.log(cellValue);
    if ( ['Cell value 3','Cell value 6'].includes(cellValue) ){
        $('.checkbox1', this).prop('checked',true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
 <thead></thead>
 <tbody>
   <tr>
    <td>Cell value 1</td>
    <td>Cell value 2</td>
    <td>Cell value 3</td>
    <td>
     <input type="checkbox" class="checkbox1" value="value1">
     <input type="checkbox" class="checkbox2" value="value2">
    </td>
   </tr>
   <tr>
    <td>Cell value 4</td>
    <td>Cell value 5</td>
    <td>Cell value 6</td>
    <td>
     <input type="checkbox" class="checkbox1" value="value1">
     <input type="checkbox" class="checkbox2" value="value2">
    </td>
   </tr>
 </tbody>
</table>

This worked. Thank you. The idea of using classes vs ids is something new but exciting for sure. — Anirban Chatterjee, Jul 16 '20 at 16:48

score 0 · Answer 2 · answered Jul 16 '20 at 00:25

You can't generate element with the same id. It will select the first element with that id when the function first executed. Use class="" instead.

also if you wanna store each checked value, check: HTML Element Array, name="something[]" or name="something"?

Having trouble setting a checkbox using jquery

2 Answers2