seleccionar elemento con selectores en jQuery

quiero seleccionar un elemento con jQuery.

<ul>
    <li><label><input type="checkbox" class="checkbox">checkbox1</label></li>
         <ul class="list">
          <li>lorem</li>
          <li>lorem</li>
          <li>lorem</li>
        </ul>
    <li><label><input type="checkbox" class="checkbox">checkbox2</label></li>
         <ul class="list">
          <li>lorem</li>
          <li>lorem</li>
          <li><lorem/li>
        </ul>
 </ul>

Quiero ocultar y mostrar la lista que está directamente debajo de la casilla de verificación con 1 función jQuery.

 $(".list").hide();

$(".checkbox").click(function() {

    if ($(".checkbox").is(":checked"))
    {
        $("????").show('slow');
    }
    else
    { 
        $("????").hide('slow');
    }
});

El ???? necesita ser un selector que (solo) seleccione la lista debajo de la casilla de verificación.

preguntado el 22 de mayo de 12 a las 14:05

4 Respuestas

En primer lugar, su HTML no es válido, ya que no puede tener elementos entre el li en un parche de ul. Cambia tu HTML a esto:

<ul>
    <li>
        <label><input type="checkbox" class="checkbox">checkbox1</label>
        <ul class="list">
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem</li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox" class="checkbox">checkbox2</label>
        <ul class="list">
            <li>lorem</li>
            <li>lorem</li>
            <li><lorem</li>
        </ul>
    </li>
 </ul>

Entonces puedes usar el padre más cercano li como un contexto para encontrar la relación ul:

$(".list").hide();

$(".checkbox").click(function() {
    var $parentLi = $(this).closest("li");
    if ($(this).is(":checked")) {
        $("ul", $parentLi).show('slow');
    }
    else { 
        $("ul", $parentLi).hide('slow');
    }
});

contestado el 22 de mayo de 12 a las 14:05

Respuesta rápida:

$(".checkbox").click(function() {

    if ($(".checkbox").is(":checked"))
    {
        $(this).next('ul').show('slow');
    }
    else
    { 
        $(this).next('ul').hide('slow');
    }
});

Sin embargo, como se señaló, su HTML no es válido, el niño <ul>s debe estar dentro <li>s mismos.

Además, dependiendo de la visibilidad/estado inicial de las casillas de verificación, puede acortar el código usando $(this).next('ul').toggle('slow'); en lugar de marcar la casilla de verificación de estado marcado.

contestado el 22 de mayo de 12 a las 14:05

http://jsfiddle.net/Y7WDJ/ una versión simple de lo que quieres. Selecciona el siguiente .list elemento y lo alterna cuando se hace clic en la casilla de verificación.

contestado el 22 de mayo de 12 a las 14:05

Puede atravesar su estructura bastante fácilmente con 

$(this).parents('li').children('.list').show('slow');

Puede haber una forma más sucinta de hacerlo si lee los documentos de jquery sobre selectores y recorridos

contestado el 22 de mayo de 12 a las 14:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.