5

Preciso quando o usuário escrever em um input text, a checkbox da respectiva linha da tabela deve ser marcada, e se caso o usuário deixar o input text novamente em branco, a checkbox se desmarca. Segue o código:

<table class="table table-striped" id="produtostab">
    <thead>
        <tr>
            <th>Quantidade</th>
            <th>Selecionar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="inputq1" name="inputquant" type="text" />
            </td>
            <td>
                <input type="checkbox" name="checkboxvar">
            </td>
        </tr>
        <tr>
            <td>
                <input class="inputq1" name="inputquant[]" type="text" />
            </td>
            <td>
                <input type="checkbox" name="checkboxvar[]">
            </td>
        </tr>
    </tbody>
</table>
<button id="add" class="btn btn-default">Adicionar</button>

Fiddle

Como vocês podem ver, será uma tabela com múltiplas linhas, então não adianta o usuário escrever em um input e marcar todos os checkbox, é necessário marcar apenas os das respectivas linhas que os inputs forem preenchidos. Acredito que isso deva ser feito com JavaScript, mas como?

Este é o PHP que cria o HTML:

<?php
$conn = new mysqli('localhost', 'root', '', 'sindigrejinha') or die('Falha ao conectar-se com DB');
mysqli_query($conn, "SET NAMES 'UTF8'") or die("ERROR: " . mysqli_error($con));
$result = $conn -> query("select idProduto, Descricao from produto");
while ($row = $result -> fetch_assoc()) {
    unset($idProduto, $Descricao);
    $idProduto = $row['idProduto'];
    $Descricao = $row['Descricao'];
    echo '<tr>';
    echo '<td>' . $Descricao . '</td>';
    echo '<td><input name="inputquant[]" type="text" /></td>';
    echo '<td><input type="checkbox" value="'. $idProduto .'" name="checkboxvar[]"></td>';
    echo '</tr>';
}
?>
1
  • Eu queria remover o código PHP pois o problema é puro JS/HTML, mas como tem uma resposta que fala de PHP, não deu...
    – brasofilo
    Commented 27/08/2014 às 17:58

4 Respostas 4

6

Sugiro adaptar levemente seu HTML, incluindo uma classe (digamos: CaixaMagica) em cada caixa de texto e uma classe em cada checkbox. Seu HTML vai ficar parecido com isso:

<table>
    <tr>
        <td>
            <input class="CaixaMagica" name="inputquant" type="text" />
        </td>
        <td>
            <input class="CheckboxMagico" type="checkbox" value="idProduto" name="checkboxvar" />
        </td>
    </tr>
    <tr>
        <td>
            <input class="CaixaMagica" name="inputquant" type="text" />
        </td>
        <td>
            <input class="CheckboxMagico" type="checkbox" value="idProduto" name="checkboxvar" />
        </td>
    </tr>
</table>

Depois disto, basta utilizar este código:

$(function(){
    $(".CaixaMagica").keyup(function(){
        if($(this).val().length > 0){
            $(this).parent().parent().find(".CheckboxMagico").prop("checked", true);
        } else {
            $(this).parent().parent().find(".CheckboxMagico").prop("checked", false);
        }
    });
});

Edit: esqueci do JSFiddle que eu preparei.

11
  • é exatamente o que eu mandei hehehehehe claro exemplo melhor elaborado mas o resultado é o mesmo precisa de adaptação para a necessidade dele somente hehehehe muito bom
    – Otto
    Commented 27/08/2014 às 17:31
  • Entendo. Funciona legal, mas só se a input de texto e a checkbox estiverem no mesmo <td>. No meu caso, elas precisam ficar em <td>s diferentes, como é visto no código que eu passei. Desculpe a ignorância, mas meu conhecimento em javascript é muitíssimo limitado mesmo. Commented 27/08/2014 às 17:33
  • Coloca seu código no fiddle assim podemos ajudar mais
    – Otto
    Commented 27/08/2014 às 17:34
  • @Otto, é claro que há muita semelhança, mas juro que não copiei do seu exemplo; eu estava preparando meu teste quando você respondeu. Commented 27/08/2014 às 17:38
  • 1
    Rui, uma sugestão, no lugar de chamar .parent() múltiplas vezes até chegar a td, utilize .closest("td"). Commented 15/09/2015 às 1:19
2

Acho que assim fica pratico de entendimento

$( "#input-a-monitorar" ).keyup(function() {
  $('.myCheckbox').prop('checked', true);
  $('.myCheckbox').prop('checked', false);
});

Fico a disposição para mais informações

2
  • Cara, não funcionou. Tentei colocar o script dentro da tag <head> antes de <body>, antes e depois da tabela, tentei mudar input-a-monitorar para o id, name e class do meu input text e também a mycheckbox para o id, name e class do meu checkbox. Nada funcionou, eu escrevo no input text e nenhum checkbox é marcado. Talvez eu esteja fazendo algo errado, mas não sei o que. Commented 27/08/2014 às 17:07
  • mas lembrando coloca o que eu te mandei dentro do $( document ).ready(function() para funcionar certinho tanto que coloquei opção checked true e false para exemplificar se quiser colocar o codigo que voce fez no fiddle ficarei feliz em lhe ajudar ou publique ele em qualquer lugar para testes
    – Otto
    Commented 27/08/2014 às 17:10
1
<input class="input" name="inputquant" type="text" />

Colocando uma classe no input de texto, o js ficaria assim:

$(function(){
    $(".input").keyup(function(){
        if($(this).val()){
            $("input[type=checkbox]",$(this).parents("tr")).attr("checked", "checked");
        } else {
            $("input[type=checkbox]",$(this).parents("tr")).removeAttr("checked");
        }
    });
});

Espero que isso possa ajudar.

1
  • Leonardo, o parents irá continuar a buscar elementos tr mesmo após encontrar a primeira tr, então caso haja tabelas dentro de tabelas, o seu código pode introduzir um bug. Então o ideal seria usar o .closest(), até por ser mais rápido. Commented 15/09/2015 às 1:25
0

Pelo que entendi, você quer que quando ele digite uma quantidade para um produto, o checkbox armazene o ID deste produto para que depois você possa fazer referência a qual produto foi inserido a quantidade.

Se for, aconselho uma pequena modificação que vai funcionar de forma mais otimizada no seu script PHP, no momento que for recuperar os dados.

No momento que monta o HTML, faça esta alteração:

while ($row = $result -> fetch_assoc()) {
    unset($idProduto, $Descricao);
    $idProduto = $row['idProduto'];
    $Descricao = $row['Descricao'];
    echo '<tr>';
    echo '<td>' . $Descricao . '</td>';
    echo '<td><input name="inputquant['.$idProduto.']" type="text" /></td>';
    echo '<td><input type="checkbox" value="'. $idProduto .'" name="checkboxvar[]"></td>';
    echo '</tr>';
}

A diferença está no trecho name="inputquant['.$idProduto.']", deste forma você acessa a quantidade de um produto usando a ID do produto como índice do array.

Da forma como o problema foi elaborado, o checkbox está sendo um monitorador do campo quantidade, por isso faço esta sugestão. Inclusive, em um exemplo que deram, realmente resolve o problema dele, mas caso o usuário marque o checkbox sem ter preenchido nada no input, irá passar uma informação errada para o script.

0

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 .