2

Meu problema é que eu possuo uma lista, nesta lista todos os itens possuem um botão e um checkbox, o que deveria acontecer é, eu clicar no botão deste item e ele selecionar apenas o checkbox deste item. Porém o que eu consegui fazer apenas é clicar em qualquer botão e ele selecionar todos o checkbox.

Minha 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;
});

1 Resposta 1

1

Coloquei um snippet com uma possível solução.

Removi a função onclick='marcardesmarcar();' porque ela não esta no código que você postou.

Removi o display=none do input[type='checkbox'] para você ver ele alterando.

E alterei seu evento de onclick que você adicionou via jQuery.
Basicamente esse evento agora usa a função .siblings() do jQuery para procura pelo 'irmão' do botão que tenha a classe .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>

4
  • Obrigada pela ajuda, ah estas partes que voce removeu eu estou usando em outras partes do código, porém eu esqueci de remove-las ao postar, me perdoe. Único problema é que eu estou usando o foreach para me listar todos os produtos, pois fazer isso por partes como voce fez é inviável pra mim caso eu tenha um grande numero de produtos... Não há outra forma de resolver meu problema? Como gerar id para cada checkbox automaticamente?
    – LMT
    Commented 25/05/2019 às 21:34
  • Desculpa caso eu esteja falando bobagens, eu sou novata com js
    – LMT
    Commented 25/05/2019 às 21:34
  • Como você esta desenhado a tabela não deve afetar o funcionamento do javascript, Eu coloquei assim para ter mais de um checkbox/produto e poder ver o código funcionando, imagina que o html apresentado aqui é o resultado do seu foreach no php Commented 25/05/2019 às 21:37
  • 1
    Ah entendi, obrigada pela resposta e desculpa pela minha confusão no comentário anterior, muito obrigada mesmo!
    – LMT
    Commented 25/05/2019 às 21:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .