Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Exbir/ocultar checkbox dentro de TD

Recommended Posts

Dentro da primeira TD da cada TR da tabela, tenho um checkbox. Ele está definido como display:none.

 

Preciso que, ao passar o mouse sobre a TR, o checkbox seja exibido.

Ao sair da TR, o checkbox torna-se display:none novamente.

 

Como faço?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sem o HTML do elemento TABLE fica complicado dar um exemplo coeso.

Mas acredito que irei conseguir explicar:

Em todo caso vou me basear no meu exemplo mesmo:

<style>
    td.alvo > input {
        display: none
    }
    td.alvo.mostra > input {
        display: block
    }
</style>

<table>
    <tr class="mouse">
        <td>Coloque o cursor por cima</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
    <tr class="mouse">
        <td>Coloque o cursor por cima B</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
</table>

 

Primeiro temos que buscar o elemento que vai ser o alvo.

Citar

var ativar = document.getElementsByClassName('mouse');

 

Então como deu a min entender que são mais de um fazemos um loop e adicionamos um evento para o cursor sobre e quando sai

Citar

for (var i = 0; i < ativar.length; i++) {
      ativar.addEventListener('mouseenter', mostra, false);

      ativar.addEventListener('mouseleave', mostra, false);

}

 

Criamos a função para executar a mágica. E é aqui que o "bixo pega"

Nem tanto, como é uma tabela podemos nos orientar pelas células dela.

Então no meu exemplo eu tenho um TR > TD | TD

Uma linha 2 colunas, sendo a primeira o indice zero da lista e o índice 1 que é a segunda coluna (TD) onde queremos chegar.

Citar

function mostra(ev) {
    (ev.target).cells[1].classList.toggle('mostra');
}

 

Então o que você tem que fazer aí é só adaptar para o disign de sua TABLE.

Veja o exemplo completo:

Spoiler

<style>
    td.alvo > input {
        display: none
    }
    td.alvo.mostra > input {
        display: block
    }
</style>

<table>
    <tr class="mouse">
        <td>Coloque o cursor por cima</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
    <tr class="mouse">
        <td>Coloque o cursor por cima B</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
</table>

<script>
    var ativar = document.getElementsByClassName('mouse');
    for (var i = 0; i < ativar.length; i++) {
        ativar[i].addEventListener('mouseenter', mostra, false);
        ativar[i].addEventListener('mouseleave', mostra, false);
    }
    
    function mostra(ev) {
        (ev.target).cells[1].classList.toggle('mostra');
    }
</script>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 horas atrás, FabianoSouza disse:

Ok Omar~.

Vou testar sua ideia.

 

Mas minha real expectativa é fazer isso somente com CSS. Creio que exista uma maneira.

 

Valew!

Uai tenta então assim (Não sei se dar certo!):

tr:hover input[type=checkbox]

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por helkton
      iai galera, tenho uma pendenga e não consigo achar nada pra suprir minha dúvida rsss
      seguinte....
       
      Tenho um cardápio Online onde tenho os devidos ITENS sendo abertos em uma janela modal e nesta janela tenho os devidos ITENS EXTRAS em um checkbox que o usuario clicam e adicionam
      esta é minha lista de ADICIONAIS EXTRAS QUE PEGO DO BANCO DE DADOS 
       
      <label style="border:0px red solid;font-size:1em;width:90%;text-align:left;padding:0px;margin-left:2em;" onclick="somar()"> <input style="height:23px;width:23px;cursor:pointer" type="checkbox" class='limited<?php echo $resultExtrasDelivery->idExtraDelivery?>' id="valorItemExtra" name="idExtraSelects[]" value="<?php echo $resultItensExtras->valorItemExtra?>" > <span style="cursor:pointer"><?php echo $resultItensExtras->nomeItemExtra?> <span style="font-size:0.7em;color:#DD2C00"> <small> <?php if($resultItensExtras->valorItemExtra == '0.00'){echo'';}else{echo '+R$ '.$resultItensExtras->valorItemExtra.'<input type="text" value="'.$resultItensExtras->valorItemExtra.'">';}?></small> </span> </span> </label> ela vem tipo assim
      AcréscimoTradicional - Escolha até 3 opções
      BACON 1,00
      CALABRESA 1,00
      MUSSARELA 1,00
      PRESUNTO 1,00
      OVO 1,00
       
      o que quero fazer é somente somar os itens clicados pelo usuario e somar com o TOTAL DO ITEM 
      tipo pegar o total do item tipo R$30,00 e ir somando com os acrescimos escolhidos
       
      <script> function somar() { // var valorItem = document.getElementById('valorItemExtra').value; var checkbox = document.getElementById('#valorItemExtra'); var total = 0; if(checkbox.checked == true){ total += checkbox.value; } document.getElementById('somar').innerHTML = total; } </script>  
    • Por Sapinn
      Salve! Não consigo verificar se o checkbox foi marcado, isso não faz o menor sentido porquê aparentemente eu fiz tudo certo.
       
      HTML:
       <div class="mt-4 mb-3 row ">                 <label class="label_checkbox">Adicionar customização                   <input type="checkbox" id="checkbox" name="custom_shirt">                   <span class="checkmark"></span>                 </label>               </div>  
      JAVASCRIPT:
       let checkedCustomize = document.getElementById("checkbox");  if(checkedCustomize.checked){     alert("Checkbox marcado");  }else{      console.log("checkbox não marcado");  }  
    • Por Caio Vargas
      Meus amigos estou com um problema que não consigo resolver as vezes e coisas simples mais não encaixa na minha cabeca eu tenho multiplos checkbox onde cada um tem o valor porem eu tô salvando isso em uma tabela única separado por vírgula não sei se isso e correto mais na hora de recuperar e colocar como checado não vai pq ele retorna os valores tudo jundo mesmo dando um explode não vai 
    • Por tony_lu
      Olá pessoal quero colocar um campo checkbox de aceito os termos de uso, mas não estou conseguindo validar este campo para enviar
      o form apenas se este campo por marcado podem me ajudar?
    • Por carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.