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?