Click a button and select a checkbox

Question

My problem is that I have a list, in this list all items have a button and a checkbox, what should happen is, I click the button of this item and it select only the checkbox of this item. But what I managed to do is just click on any button and it select all the checkbox.

My view

 <?php foreach ($produtos as $produto): ?>
 <tr>
     <td><?= $this->Number->format($produto->id) ?></td>
     <td><?= h($produto->name) ?></td>
     <td><?= h($produto->cor) ?></td>
     <td><?= h($produto->tecido) ?></td>
     <td><?= $this->Number->format($produto->estoque) ?></td>
     <td><?= $this->Number->format($produto->preco) ?></td>
     <td>
        <button type="button" class="btn-success btn addcart" onclick='marcardesmarcar();'>+ Adicionar</button>
        <input type="checkbox" style="display:none;"  name="id[]" class="checkbox checkTodos" value="<?php echo $produto['id'];?>">
    </td>
</tr>   
<?php endforeach; ?>

Javascript:

var clicked = false;
$(".addcart").on("click", function() {
     $(".checkTodos").prop("checked", !clicked);
     clicked = !clicked;
});

Answer 1

I put a snippet with a possible solution.

I removed the function onclick='marcardesmarcar();' because she’s not in the code you posted.

I removed the display=none of input[type='checkbox'] for you to see him change.

And I altered your event from onclick that you added via jQuery.
Basically this event now uses the function .siblings() jQuery to search for the 'brother' of the button that has the class .checkTodos.

$(".addcart").on("click", function() {
  /// ; Quando o evento for disparado o this aqui dentro sera o botão
  /// ; O que o codigo abaixo faz é procurar pelo 'irmao' do botao com a
  /// ; classe `.checkTodos`
  let checkbox = $(this).siblings(".checkTodos"),
  
  /// ; Agora com o checkbox eu pego se ele esta marcado ou não
      checked  = checkbox.prop("checked");
  
  /// ; e como você fez, inverto o status de marcado ou não (toggle)
     checkbox.prop("checked",!checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
     <td>$produto->id</td>
     <td>$produto->name</td>
     <td>$produto->cor</td>
     <td>$produto->tecido</td>
     <td>$produto->estoque</td>
     <td>$produto->preco</td>
     <td>
        <button type="button" class="btn-success btn addcart">+ Adicionar</button>
        <input type="checkbox" style="display:;"  name="id[]" class="checkbox checkTodos" value="1">
    </td>
</tr>   
<tr>
     <td>$produto->id</td>
     <td>$produto->name</td>
     <td>$produto->cor</td>
     <td>$produto->tecido</td>
     <td>$produto->estoque</td>
     <td>$produto->preco</td>
     <td>
        <button type="button" class="btn-success btn addcart">+ Adicionar</button>
        <input type="checkbox" style="display:;"  name="id[]" class="checkbox checkTodos" value="2">
    </td>
</tr> 
<tr>
     <td>$produto->id</td>
     <td>$produto->name</td>
     <td>$produto->cor</td>
     <td>$produto->tecido</td>
     <td>$produto->estoque</td>
     <td>$produto->preco</td>
     <td>
        <button type="button" class="btn-success btn addcart">+ Adicionar</button>
        <input type="checkbox" style="display:;"  name="id[]" class="checkbox checkTodos" value="3">
    </td>
</tr> 
</table>