Como hacer un checked al padre, cuando selecciono al hijo en un checkbox con jQuery

publicado por: Anonymous

¿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.

solución

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”.

_x000D_

_x000D_

// cuando cambia el valor del padre hacemos lo mismo con sus hijos_x000D_
$('.padre_menu input[type=checkbox]').change(function() {_x000D_
  $(this).closest('.padre_menu').next('ul').find('.hijo_menu input[type=checkbox]').prop('checked', this.checked);  _x000D_
});_x000D_
_x000D_
_x000D_
// cuando cambia el valor de un hijo determinamos si el padre debe ser 'chequeado' o no_x000D_
$('.hijo_menu input[type=checkbox]').change(function() {_x000D_
  var closestUl = $(this).closest('ul');_x000D_
  var checkedParent = true;_x000D_
  if(closestUl.find('input[type=checkbox]:checked').length == 0) {_x000D_
    checkedParent = false;_x000D_
  }_x000D_
  _x000D_
  closestUl.prev('.padre_menu').find('input[type=checkbox]').prop('checked', checkedParent);_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>_x000D_
<ul>_x000D_
    <li class="padre_menu">_x000D_
        <div class="checkbox">_x000D_
            <label>_x000D_
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="1">_x000D_
                <span class="lbl"> Inicio</span>_x000D_
            </label>_x000D_
        </div>_x000D_
    </li>_x000D_
    <li class="padre_menu">_x000D_
        <div class="checkbox">_x000D_
            <label>_x000D_
                <input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="2">_x000D_
                <span class="lbl"> Mail</span>_x000D_
            </label>_x000D_
        </div>_x000D_
    </li>_x000D_
    <ul>_x000D_
        <li class="hijo_menu">_x000D_
            <div class="checkbox">_x000D_
                <label>_x000D_
                    <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="5">_x000D_
                    <span class="lbl"> Sub Mail</span>_x000D_
                </label>_x000D_
            </div>_x000D_
        </li>_x000D_
        <li class="hijo_menu">_x000D_
            <div class="checkbox">_x000D_
            <label>_x000D_
                <input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="6">_x000D_
                <span class="lbl"> test1</span>_x000D_
            </label>_x000D_
            </div>_x000D_
        </li>_x000D_
    </ul>_x000D_
_x000D_
</ul>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *