Ir para conteúdo

POWERED BY:

Arquivado

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

alh

Checkbox seleciona todos e muda cor javascript

Por , em Javascript

Recommended Posts

alh    1

alh
Postado

Olá Pessoal..

Tenho uma listagem que ao clicar no checkbox "selecionar todos" e ele seleciona todos os check boxes... até ai tudo bem..

Gostaria de que no momento que forem checados todos os checkboxes ele alterasse a cor dos checados é uma tabela então seria mudar a o background da TR... segue o código que checa todos... E se possível como mudar a cor de cada checkbox ao checar...

<script>
	$(function(){
	$('#marcar-todos').click(function(){
        $('table > tbody > tr > td > :checkbox')
          .attr('checked', $(this).is(':checked'))
          .trigger('change');
      });
	});
	</script>

//Esse faz a seleção de todos checkboxes
<input type="checkbox" value="1" id="marcar-todos" name="marcar-todos" />

Esse é o input de cada produto

<tr><td><input type="checkbox" value="399" name="marcar[]" /></td>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
$('table > tbody > tr').css({ backgroundColor: 'red' });

Compartilhar este post

Link para o post
Compartilhar em outros sites

alh    1

alh
Postado 
$('table > tbody > tr').css({ backgroundColor: 'red' });

Willian, deu certo ao checar muito bom, mas porém ao "descheckar" como faço para voltar a ficar sem cor como estava? pois cada td tem uma cor não adiantaria colocar apenas uma cor pois uma td é cinza e outra branca..

E mais uma coisa ao checar apenas um checkbox como mudar a cor? Valeuuuu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Agora você tem que ir trabalhando com IF/ELSE..

<script>
$(function(){
  $('#marcar-todos').on('click', function(){
      var $trs = $('table > tbody > tr');
      if ($(this).is(':checked')) {
         $trs.addClass('is-active');
      } else {
         $trs.removeClass('is-active');
      }

      $('table > tbody > tr > td > :checkbox')
        .attr('checked', $(this).is(':checked'))
        .trigger('change');
    });
});
</script>
e o css:

.is-active {
   background-color: red
}
e a mesma coisa para cada checkbox:

$('table > tbody > tr > td > input[type="checkbox"]').on('click', function() {
      var $tr = $(this).parents('tr');
      if ($(this).is(':checked')) {
         $tr.addClass('is-active');
      } else {
         $tr.removeClass('is-active');
      }
});

:lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

alh    1

alh
Postado

Olá Willian, agora não funcionou nada de jeito nenhum... nem checa os Inputs nem troca a cor, nem troca a cor de um input.....tem algo errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

funciona sim.. veja na sua implementação se você não errou alguma coisa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
.is-active {
   background-color: red
}
</style>
</head>
<body>


<input type="checkbox" id="marcar-todos" /> TODOS:
<table>
  <tbody>
    <tr>
      <td><input type="checkbox">1</td>
    </tr>
    <tr>
      <td><input type="checkbox">2</td>
    </tr>
    <tr>
      <td><input type="checkbox">3</td>
    </tr>
    <tr>
      <td><input type="checkbox">4</td>
    </tr>
    <tr>
      <td><input type="checkbox">5</td>
    </tr>
    <tr>
      <td><input type="checkbox">6</td>
    </tr>
    <tr>
      <td><input type="checkbox">7</td>
    </tr>
    <tr>
      <td><input type="checkbox">8</td>
    </tr>
    <tr>
      <td><input type="checkbox">9</td>
    </tr>
    <tr>
      <td><input type="checkbox">10</td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
  var $trs = $('table > tbody > tr');
  $('#marcar-todos').on('click', function(){
    _isSelected($trs, $(this).is(':checked'));

    $('table > tbody > tr > td > :checkbox')
      .attr('checked', $(this).is(':checked'))
      .trigger('change');
  });
  $('table > tbody > tr > td > input[type="checkbox"]').on('click', function() {
    var $tr = $(this).parents('tr');

    _isSelected($tr, $(this).is(':checked'));
  });
});

function _isSelected($element, status) {
  if (status) {
    $element.addClass('is-active');
  } else {
    $element.removeClass('is-active');
  }
}
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

alh    1

alh
Postado

Olá Willian,

Funcionou agora, ficou muito bom, mas tem um porém, eu utilizo "tablesorter" que é uma biblioteca jquery para deixar a tabela mais bonita, zebrada e possui uma busca rapida em jquery...

Agora quando utilizo esse código ( <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> ) ele simplesmente ANULA o tablesorter retirando o efeito zebrado (uma tr cinza e outra branca sucessivamente) e não funciona o tablesorter que é muito necessário... Você saberia como resolver esse conflito, já passou por isso?

Valeuuu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não importe o jQuery duas vezes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alh    1

alh
Postado

Não importe o jQuery duas vezes.

Oi Willian, fiz isso não importei, então não funcionou o seu código e tablesorter sim..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Altera o meu código para:

<script>
$(function(){
  $('#marcar-todos').on('click', function(){
    var $trs = $('table > tbody > tr');
    _isSelected($trs, $(this).is(':checked'));

    $('table > tbody > tr > td > :checkbox')
      .attr('checked', $(this).is(':checked'))
      .trigger('change');
  });

  $('body').on('click', 'table > tbody > tr > td > input[type="checkbox"]', function() {
    var $tr = $(this).parents('tr');

    _isSelected($tr, $(this).is(':checked'));
  });
});

function _isSelected($element, status) {
  if (status) {
    $element.addClass('is-active');
  } else {
    $element.removeClass('is-active');
  }
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

alh    1

alh
Postado

Willian, perfeito Consegui resolver Agoraa \0/... você é fera já estava decepcionado em pedir ajuda e não solucionar... consegui fazendo o seguinte, troquei a chamado do jquery do tablesorter pela chamada que me passou, e simplesmente funcionou...!! Não sei porque seu código não funcionava com a versão do jquery que tinha do tablesorter!! Valeuu mesmo!

Não sei se é permitido isso aqui de linkar outro tópico, mas aproveitando que você é fera em ajax e json veja se tem uma dica para me orientar nesse tópico:

http://forum.imasters.com.br/topic/552875-autocomplete-ajax-com-botao-pre-cadastrar/#entry2206312

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito