[Resolvido] JQuery - Selecionar/Deselecionar todos não funciona

31 de julho de 2013 2 respostas

MusashiBR 31 de julho de 2013

Bom dia.
Não sei por qual motivo um link clicavel para selecionar todos e deselcionar todos não funciona, de diversas formas.
A pagina em si é feita em JSP e JSTL e, não sei se influencia, também estou usando o prettyPhoto, que está em include no header.

<%@page pageEncoding="UTF-8" language="java"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<form name="testeDesagrupamento" id="testeDesagrupamento" action="desagrupamento.do">
    <div id="agrupadora">
        Agrupadora ${bean.agrupadora}
        <input type="checkbox" class="agrupadora" id="agrupadora" name="agrupadora" value="${bean.agrupadora}">
    </div>

    <div id="agrupadas">
        Agrupadas
        <c:forEach var="agrupadas" items="${mostraAgrupadas}">
            <a href="#" onclick="$('#informacoes').load('Info.do?agrupadas=${agrupadas.Agrupada}');" >
                ${agrupadas.Agrupada}</a>
            <input type="checkbox" class="seraoDesagrupadas" name="seraoDesagrupadas" value="${agrupadas.Agrupada}">
        </c:forEach>
        <a href="#" id="selecionarTodos">Selecionar todos.</a>
    </div>

    <div id="informacoes">
    </div>
    <a href="agrupamento.do" name="Cancelar" type="button" class="botao" id="Cancelar">Cancelar</a>
    <input class="botao" type="submit" value="Confirmar">
</form>

O JQuery em si, eis alguns que usei. Este aqui funciona em partes, o texto ele troca mesmo, mas os checkboxes não.

<script type="text/javascript">
    $("#selecionarTodos").click(function(){
        if ($("input[type='checkbox']").prop("checked")) {
            $(':checkbox').prop('checked', '');
            $(this).text('Selecionar todos');
        } else {
            $(':checkbox').prop('checked', 'checked');
            $(this).text('Deselecionar todos');
        }
    });
</script>

Já tentei colocando o 'checked' em vez do true e não foi, neste abaixo.

$('#selecionarTodos').click(function(){
        $('input[name=seraoDesagrupadas]').each(function(){
            $(this).prop('checked', true); 
        });

Pensei que pudesse ser o prettyPhoto atrapalhando, mas não era porque este também não deu certo. Tentei usar o checado do checkbox como clicked.

$.noConflict();
        jQuery(document).ready(function($) {
            $('#agrupadora').click(function() {
                if(this.checked == true){
                    $("input[type=checkbox]").each(function() {
                        this.checked = true;
                    });
                } else {
                    $("input[type=checkbox]").each(function() {
                        this.checked = false;
                    });
                }
            });
        });

Agradeceria se pudessem me dar uma solução para isto.

edit: versões do jquery, que são carregados no header, jquery 1.10.0 e o jquery migrate 1.2.1.

2 Respostas

jplindgren 31 de jul. de 2013

O código jquery que você usou em si está certo. Fiz um teste no jsfiddle usando um html simplificado e funcionou certinho.
Da uma olhada:
http://jsfiddle.net/9aSQQ/1/

Como seus checkbox são populados dinamicamente tenta usar a função “on” como um delegate ao invés do onClick como demonstrado aqui e abaixo http://jsfiddle.net/9aSQQ/3/

$("#agrupadas").on('click','#selecionarTodos' ,function(){  
            if ($("input[type='checkbox']").prop("checked")) {  
                $(':checkbox').prop('checked', '');  
                $(this).text('Selecionar todos');  
            } else {  
                $(':checkbox').prop('checked', 'checked');  
                $(this).text('Deselecionar todos');  
            }  
        });

Me diga se aconteceu alguma coisa.
Caso ainda não tenha sucesso da uma olhada no console do firebug, e tente fazer esse mesmo javascript em uma página pura só com o jquery carregado.
Abs!

MusashiBR 31 de jul. de 2013

jplindgren:
O código jquery que você usou em si está certo. Fiz um teste no jsfiddle usando um html simplificado e funcionou certinho.
Da uma olhada:
http://jsfiddle.net/9aSQQ/1/

Como seus checkbox são populados dinamicamente tenta usar a função “on” como um delegate ao invés do onClick como demonstrado aqui e abaixo http://jsfiddle.net/9aSQQ/3/
$("#agrupadas").on('click','#selecionarTodos' ,function(){  
            if ($("input[type='checkbox']").prop("checked")) {  
                $(':checkbox').prop('checked', '');  
                $(this).text('Selecionar todos');  
            } else {  
                $(':checkbox').prop('checked', 'checked');  
                $(this).text('Deselecionar todos');  
            }  
        });
Me diga se aconteceu alguma coisa.
Caso ainda não tenha sucesso da uma olhada no console do firebug, e tente fazer esse mesmo javascript em uma página pura só com o jquery carregado.
Abs!

Não tava dando certo no jsfiddle, até eu colocar para rodar no jquery 2.x, e rodou, hauahaUhAuahAUhA.
Não tinha prestado atenção na versão do JQuery kkkkkkk
Obrigado pela ajuda jplindgren.

Criado 31 de julho de 2013

Ultima resposta 31 de jul. de 2013

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados