7

¿Cómo podría hacer un evento de checked en jQuery? Tengo este estructura:

introducir la descripción de la imagen aquí

Con el código seria:

<ul>
    <li class="padre_menu">
        <div class="checkbox">
            <label>
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="1">
                <span class="lbl"> Inicio</span>
            </label>
        </div>
    </li>
    <li class="padre_menu">
        <div class="checkbox">
            <label>
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="2">
                <span class="lbl"> Mail</span>
            </label>
        </div>
        <ul>
            <li class="hijo_menu">
                <div class="checkbox">
                    <label>
                        <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="5">
                        <span class="lbl"> Sub Mail</span>
                    </label>
                </div>
            </li>
            <li class="hijo_menu">
                <div class="checkbox">
                    <label>
                        <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="6">
                        <span class="lbl"> test1</span>
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

Lo que necesito es que cuando seleccione "Sub Mail" o "test1" Me seleccione tambien el "Mail", o si marco solo "Mail", me seleccione los 2 items que trae.

2
  • El segundo <li class="hijo_menu"> (test1) está fuera del <ul> del cual forma parte el ítem "Sub Mail", ¿es intencional esto o debería también formar parte de dicho <ul> ?
    – Shaz
    Commented el 7 sept. 2016 a las 15:10
  • Ya fue modificada, gracias por la observación!
    – Jean Paul
    Commented el 7 sept. 2016 a las 15:16

2 respuestas 2

6

Esta solución basada en jQuery consiste en:

  • Al cambiar el estado de un "padre", subimos un poco en el DOM hasta su contenedor <li>, a continuación encontramos el siguiente <ul> que contiene a los hijos respectivos, y aplicamos el mismo efecto (check/uncheck) a los elementos checkbox.
  • Al cambiar el estado de uno de los "hijos", si hacemos un check, simplemente hacemos un proceso similar al anterior, pero a la inversa para hacer el check respectivo del "padre".
  • Si hicimos uncheck de uno de los "hijos", entonces vamos a nuestro <ul> contenedor de "hijos" y miramos si hay al menos algún checkbox "hijo" seleccionado o no. En caso que haya alguno seleccionado no hacemos nada y el checkbox "padre" sigue seleccionado, de lo contrario quitamos el check del "padre".

// cuando cambia el valor del padre hacemos lo mismo con sus hijos
$('.padre_menu input[type=checkbox]').change(function() {
  $(this).closest('.padre_menu').next('ul').find('.hijo_menu input[type=checkbox]').prop('checked', this.checked);  
});


// cuando cambia el valor de un hijo determinamos si el padre debe ser 'chequeado' o no
$('.hijo_menu input[type=checkbox]').change(function() {
  var closestUl = $(this).closest('ul');
  var checkedParent = true;
  if(closestUl.find('input[type=checkbox]:checked').length == 0) {
    checkedParent = false;
  }
  
  closestUl.prev('.padre_menu').find('input[type=checkbox]').prop('checked', checkedParent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
    <li class="padre_menu">
        <div class="checkbox">
            <label>
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="1">
                <span class="lbl"> Inicio</span>
            </label>
        </div>
    </li>
    <li class="padre_menu">
        <div class="checkbox">
            <label>
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="2">
                <span class="lbl"> Mail</span>
            </label>
        </div>
    </li>
    <ul>
        <li class="hijo_menu">
            <div class="checkbox">
                <label>
                    <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="5">
                    <span class="lbl"> Sub Mail</span>
                </label>
            </div>
        </li>
        <li class="hijo_menu">
            <div class="checkbox">
            <label>
                <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="6">
                <span class="lbl"> test1</span>
            </label>
            </div>
        </li>
    </ul>

</ul>

1
  • Muchas Gracias, resulto.. y me olvidaba, justo habia arreglado las etiquetas, el <ul> del hijo tendría que estar dentro del padre de <li>.
    – Jean Paul
    Commented el 7 sept. 2016 a las 16:02
1

El siguiente ejemplo cumple con recursividad, algo necesario cuando se trabaja con anidaciones

$(function () {
 $(".autoCheckbox").on("click",function () {
  var expr="li input[type=checkbox]",$this=$(event.target);
  while ($this.length) {
   $input=$this.closest("li").find(expr);
   if ($input.length) {
    if ($this[0]==event.target) {
     checked = $this.prop("checked");
     $input.prop("checked", checked).css("opacity","1.0");
    }
    checked=$input.is(":checked");
    $this.prop("checked", checked).css("opacity",
     (checked && $input.length!= $this.closest("li").find(expr+":checked").length)
      ? "0.5" : "1.0");
   }
   $this=$this.closest("ul").closest("li").find(expr.substr(3)+":first");
  }
 });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="autoCheckbox">
  <li>
   <input type="checkbox" id="Inicio">Inicio
   <ul>
    <li>
     <input type="checkbox" id="Sub-Mail">Sub-Mail
    </li>
    <li>
     <input type="checkbox" id="test">test
     <ul>
      <li>
       <input type="checkbox" id="Sub-Mail 2">Sub-Mail 2
      </li>
      <li>
       <input type="checkbox" id="test 2">test 2
        <ul>
         <li>
          <input type="checkbox" id="Sub-Mail 3">Sub-Mail 3
         </li>
         <li>
          <input type="checkbox" id="test 3">test 3
         </li>
        </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
  <li>
   <input type="checkbox" id="Mail">Mail
   <ul>
    <li>
     <input type="checkbox" id="Sub-Mail">Sub-Mail
    </li>
    <li>
     <input type="checkbox" id="test">test
     <ul>
      <li>
       <input type="checkbox" id="Sub-Mail 2">Sub-Mail 2
        <ul>
         <li>
          <input type="checkbox" id="Sub-Mail 3">Sub-Mail 3
         </li>
         <li>
          <input type="checkbox" id="test 3">test 3
         </li>
        </ul>
      </li>
      <li>
       <input type="checkbox" id="test 2">test 2
        <ul>
         <li>
          <input type="checkbox" id="Sub-Mail 3">Sub-Mail 3
         </li>
         <li>
          <input type="checkbox" id="test 3">test 3
         </li>
        </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.