0

Gostaria que quando eu marcasse o checkbox, o input à sua frente tornasse visível, encontrei uma função que resolveu parcialmente o problema:

//capturando evento de click e touch(mobile) em todos os checkboxs
$('input[type="checkbox"]').on('click touchstart', function(){
    //capturando a quantidade de checkboxs checados
    let quantCheck = $('input[type="checkbox"]:checked').length;

    /*verificando se o número de itens checados é diferente
     de zero para então mostrar o botão*/
    if(quantCheck != 0) {
        $('#botao').css('display', 'block')
    } 
    else {
        $('#botao').css('display', 'none')
    }
});
#botao{
    display: none;
}
<td><input type="checkbox"> <input type="number" id="botao"></td>

Porém, não vou usar apenas um checkbox e input, e sim vários, pois eles estarão dentro de uma tabela, e por ser um id, só pode ser utilizada uma vez, então pensei em para cada registro na tabela, seria o nome botao + id do registro, exemplo: id="botao1", id="botao2", id="botao3" em diante... Então tentei fazer a seguinte alteração no código, porém sem sucesso:

$('input[type="checkbox"]').on('click touchstart', function(){
                let quantCheck = $('input[type="checkbox"]:checked').length;

                if(quantCheck != 0) {

                <?php
                foreach ($pdo->query($sql) as $row) {
                    ?>
                    $('#botao<?php echo $row['id']; ?>').css('display', 'block')
                <?php } ?>
                }

                else {
                <?php
                foreach ($pdo->query($sql) as $row) {
                    ?>
                    $('#botao<?php echo $row['id']; ?>').css('display', 'none')
                <?php } ?>
                }

                });

<?php
    foreach ($pdo->query($sql) as $row) {
        ?>
                    #botao<?php echo $row['id']; ?>{
                        display: none;
                    }
    <?php } ?>
<td><input type="checkbox"> <input type="number" id="botao<?php echo $row['id']; ?>"></td>

O que está acontecendo: Agora que é com vários checkbox e input, ao marcar qualquer checkbox, aparece todos, sendo que é para aparecer apenas o que está à frente do checkbox marcado. Acredito que seja porquê, na função, está pegando type="checkbox", ou seja, qualquer checkbox fará todos aparecerem, acho que será necessário também filtrar por id do checkbox, igual fiz com os inputs, porém como vou fazer isto?

1 Resposta 1

1

Fiz algumas modificações no seu código, não precisa ter preocupação com id ou classe neste exemplo, basta usar o elemento clicado e pegar o seu elemento pai, no caso td e pegar o elemento filho desse pai que deseja visível, no caso o seletor input[type="number"]:

    // capturando evento de click e touch(mobile) em todos os checkboxs
    $('input[type="checkbox"]').on('click touchstart', function() {
        /* verificando se o checkbox clicado está marcado para então mostrar o botão */
        if (this.checked) {
            $(this) // checkbox clicado
                .parent('td') // elemento td que contém o checkbox
                .find('input[type="number"]') // input type text para exibir ou ocultar
                .show(); // exibe
        } else {
            $(this).parent('td').find('input[type="number"]').hide();
        }
    });
    input[type="number"] {
        display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
</table>

1
  • Funcionou perfeitamente aqui amigo! Obrigado! 18/03/2020 às 22:48

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 .