Seleccionar / marcar elemento con JQUERY

neodani · #1 (**permalink**) 03/05/2010, 12:56

Buenas compis,

Tengo un problema a la hora de marcar y desmarcar elementos. Me explico. Parto de una lista de elementos

Código HTML:

Ver original<ul class="lista">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Y lo que quiero es que el usuario pueda marcar y/o desmarcar los elementos a su antojo, esto me es util si puedo saber que elementos se marcaron finalmente, se puede saber?

El código que he conseguido crear solo marca, no encuentro la forma de desmarcar un elemento marcado!!

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Marcando elementos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("li").click(function () {  
      $(this).addClass('activo');
    });
    $("li.activo").click(function () {  
      $(this).removeClass('activo');
    });
});
</script>
<style type="text/css">
.lista {
    padding:10px;
    margin:0px;
    list-style:none;
    width:50px;
}
.lista li {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
.lista li:hover {
    border:1px solid #e53500;
    text-decoration:none;
}
 
li.activo{
    background:red;
    width:20px;
    height:20px;
    font-weight:bold;
    color:#fff;
}
</style>
</head>
<body>
<ul class="lista">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

¿Cómo se haría para desmarcar un elemento que fue marcado?

Muchas gracias de antemano!

mayid · #2 (**permalink**) 03/05/2010, 18:51

No se por que no funciona tu codigo, pero siempre podes usar Selectable de jquery UI.

_Ju · #3 (**permalink**) 03/05/2010, 19:22

No se supone que debe de haber una clase llamada "activo" para que esto funcione???

Veo que tienes "li.activo" pero no la clase "activo" como tal

mayid · #4 (**permalink**) 03/05/2010, 19:45

Cita:

li.activo{
background:red;
width:20px;
height:20px;
font-weight:bold;
color:#fff;
}

Creo que es cierto, que la clase tienen que estar separada del elemento en sí.

neodani · #5 (**permalink**) 03/05/2010, 23:41

Cita:

Iniciado por _Ju

No se supone que debe de haber una clase llamada "activo" para que esto funcione???

Veo que tienes "li.activo" pero no la clase "activo" como tal

Lo probé separándolo pero tampoco consigo que desmarque un elemento ya marcado.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Marcando elementos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".lista li").click(function () {  
      $(this).addClass('activo');
    });
    
     $(".lista li.activo").click(function () {  
      $(this).removeClass('activo');
    });
});
</script>
<style type="text/css">
.lista {
    padding:10px;
    margin:0px;
    list-style:none;
    width:50px;
}
.lista li {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
.lista li:hover {
    border:1px solid #e53500;
    text-decoration:none;
}
 
.activo{
    background:red;
    width:20px;
    height:20px;
    font-weight:bold;
    color:#fff;
}
</style>
</head>
<body>
<ul class="lista">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

Raro no?

Dany_s · #6 (**permalink**) 04/05/2010, 04:26

con toggleClass

Código Javascript:

Ver original$(function() {
        $("li").click( function () {
            $(this).toggleClass('activo');
        });
    });

neodani · #7 (**permalink**) 04/05/2010, 13:15

Cita:

Iniciado por Dany_s

con toggleClass

Código Javascript:

Ver original$(function() {
        $("li").click( function () {
            $(this).toggleClass('activo');
        });
    });

Muchas gracias Dany_s, funcionó a la perfección.

¿Tengo alguna manera de saber que elementos están actualmente marcados?

Ya que la idea, es que según la lista que muestre se deban marcar 1 o más opciones, y llegado a ese limite, envíe ese resultado por ajax a un script el cual devolverá (con json) una nueva "lista de opciones" a seleccionar y así ir continuando.

Sabes como saber si se seleccionó al menos 1 elemento de la lista?

Muchas gracias de antemano!

Dany_s · #8 (**permalink**) 04/05/2010, 15:24

$('.activo').length

neodani · #9 (**permalink**) 04/05/2010, 16:29

Cita:

Iniciado por Dany_s

$('.activo').length

Gracias nuevamente :)

Código Javascript:

Ver original$(document).ready(function() {
    $("li").click( function () {
        $(this).toggleClass('activo');
        var n = $('.activo').length;
        $("span").text("Hay " + n + " elementos seleccionados");
    });
});