11

Gostaria de usar um botão para poder Marcar/Desmarcar checkbox. Tenho esse botão que chama uma função, vejam:

<button 
  class='btn btn-large' 
  type='button' 
  title='Todos' 
  id='todos' 
  onclick='marcardesmarcar();'>
    <i class='icon-large icon-ok'></i>
</button>

A função:

function marcardesmarcar(){
  $('.marcar').each(
         function(){
           if ($(".marcar").prop( "checked")) 
           $(this).attr("checked", false);
           else $(this).attr("checked", true);               
         }
    );
}

Os checks estão dessa forma:

<input type='checkbox' class='marcar' name='check[]'/>

Esse script até faz certo na primeira vez, mas na segunda ele não faz nada.

3
  • Se não me engano, o atributo checked do HTML (que corresponde a .attr("checked")) deixa a caixa marcada independente do valor do atributo, só pelo atributo estar declarado. Acho que <input type="checkbox" checked="false" /> deixa marcado.
    – dang
    Commented 30/05/2014 às 19:29
  • 2
    Seria legal se você avaliasse a melhor resposta para dar o accept, (sinal de "resposta aceita", em verde) e depois aplicasse na resposta escolhida, uma vez só. Deve ser a terceira vez que eu entro aqui e o seu "accept" mudou de lugar. Veja mais neste link: Como e por que aceitar uma resposta
    – Largato
    Commented 30/05/2014 às 20:38
  • 1
    Avalei como a melhor a resposta do Anderson Pierok, mas agradeço pelo aviso, serei mais prudente em avaliar e somente após selecionar a melhor resposta. Commented 30/05/2014 às 20:43

7 Respostas 7

18

Teste assim:

function marcardesmarcar(){
    $(".marcar").each(
        function() {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
            }
        }
    });
}
9
  • Perfeito, valeu pela colaboração. Commented 30/05/2014 às 19:39
  • 1
    Acho que isso faria com que cada check alterne, não? Quer dizer, se metade dos checks estiverem marcados e outra metade estiverem desmarcados, vai inverter tudo, ao invés de marcar todos igualmente, ou desmarcar todos de uma vez.
    – dang
    Commented 30/05/2014 às 19:42
  • 1
    Sim, o if estava incorreto, observado pelo @bfavaretto e eu o alterei. Commented 30/05/2014 às 19:57
  • 2
    @adventistapr Clique no link "editada" logo abaixo da resposta para ver as edições que foram feitas.
    – bfavaretto
    Commented 30/05/2014 às 19:57
  • 2
    @adventistapr Se o que você quer é uma função de marcar ou desmarcar todos (e não alternar o estado de cada um), um botão não é a melhor solução de interface. Seria mais claro usar um outro checkbox: se ele está marcado, todos ficam marcados também; se ele é desmarcado, todos são desmarcados. Pois imagine, com o botão, o que acontece quando você marca manualmente quase todos os checkboxes e depois clica no botão. O que é pra acontecer? Marcar os que faltam, ou desmarcar todos? E se você só checar um manualmente?
    – bfavaretto
    Commented 30/05/2014 às 20:27
13

O problema é que no if você devia testar o this, e não uma coleção de elementos:

function marcardesmarcar() {
    $('.marcar').each(function () {
        if (this.checked) this.checked = false;
        else this.checked = true;
    });
}

Estando a testar $('.marcar').prop("checked")dentro do if, a partir do momento que um elemento tiver sido mudado esse if vai dar true. Presumo que você queira testar o elemento que está a ser percorrido/iterado.

Exemplo: http://jsfiddle.net/H544C/1/

3
  • Olá Sérgio, obrigado pelo resposta, por favor faço o seguinte teste nesse seu exemplo, clica para marcar todos os checks e depois clica para desmarcar, isso vai funcionar na primeira vez, na segunda já não. Commented 30/05/2014 às 19:30
  • @adventistapr, corrigi. É isto que pretende?
    – Sergio
    Commented 30/05/2014 às 19:35
  • 1
    É isso mesmo Sergio, muito obrigado pela grande ajuda. Commented 30/05/2014 às 19:48
7

Com javascript puro vc pode pegar o elemento pelo nome e atribuir o valor do checked de marcar/desmarcar todos aos demais no onclick(), pois getElementsByName() retorna uma array.

<script type="text/javascript">
    function marcarTodos(marcar){
        var itens = document.getElementsByName('cores[]');

        if(marcar){
            document.getElementById('acao').innerHTML = 'Desmarcar Todos';
        }else{
            document.getElementById('acao').innerHTML = 'Marcar Todos';
        }

        var i = 0;
        for(i=0; i<itens.length;i++){
            itens[i].checked = marcar;
        }

    }
</script>
<form>
    <input type="checkbox" name="cores[]" onclick="marcarTodos(this.checked);">
     <span id="acao">Marcar</span> <br>
    <input type="checkbox" name="cores[]" value="azul"> azul <br>
    <input type="checkbox" name="cores[]" value="verde"> verde <br>
    <input type="checkbox" name="cores[]" value="branco"> branco <br>
</form>
4
$("#MarcarTodos").click(function(){
        if ($(this).prop( "checked")){ 
            marcardesmarcar(true);
        }else{
            marcardesmarcar(false);
        }
    });

    function marcardesmarcar(bool){
      $('.marcar').each(
            function(){
               $(this).prop("checked", bool);            
             }
        );
    }
3

Criei o mesmo script de uma maneira mais simples:

marcarTodosCheckBoxes: function (seletorCheckBoxes) {
        $(this).prop('checked', !$(this).prop('checked'));
        $(seletorCheckBoxes).prop("checked", $(this).prop("checked"));
    }
2

Estou montando uma biblioteca de eventos Jquery para ser utilizada em qualquer projeto, e consegui criar esse mesmo script dessa forma:

$(document).ready(function(){

   $("#ckAll").click(function()  {  // minha chk que marcará as outras
     
if ($("#ckAll").prop("checked"))   // se ela estiver marcada... 
     
$(".chk").prop("checked", true);  // as que estiverem nessa classe ".chk" tambem serão marcadas
     else $(".chk").prop("checked", false);   // se não, elas tambem serão desmarcadas
     
   });
}); 

funciona perfeitamente, e acredito que ele esteja de forma simples e objetiva! aprimorada na base dos exemplos acima...

1
<script type="text/javascript">
    function marcarTodos(marcardesmarcar){
        $('.marcar').each(function () {
            this.checked = marcardesmarcar;
        });
    }
</script>
<form>
    <input type="checkbox" name="cores[]" onclick="marcarTodos(this.checked);">
     <span id="acao">Marcar</span> <br>
    <input type="checkbox" class="marcar" name="cores[]" value="azul"> azul <br>
    <input type="checkbox" class="marcar" name="cores[]" value="verde"> verde <br>
    <input type="checkbox" class="marcar" name="cores[]" value="branco"> branco <br>
</form>

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 .