0

tengo una lista li con checkbox, lo que deseo es obtener los activos que están dentro del tr.

Asi esta mi html del td con el ul en un tr

<td class="options">
<div class="dropdown dropdown-options">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
        <i class="icon_plus_alt2"></i>
    </a>
    <div class="dropdown-menu">
        <h5>Agregar extras</h5>
            <ul class="clearfix ul_extras">                                          
                <li>
                    <label class="container_check"><span clas="nombre_extra">crema uno</span><small>+ $2.56</small>
                        <input type="checkbox" class="check_activo">
                        <span class="checkmark"></span>
                    </label>
                </li>
                <li>
                    <label class="container_check"><span clas="nombre_extra">Fresas</span><small>+ $0.50</small>
                        <input type="checkbox" class="check_activo">
                        <span class="checkmark"></span>
                    </label>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <label class="container-fluid">Ingrese cantidad<small></small>
                        <input type="text" value="1" name="options_1" class="cantidadProducto">
                        <span class="checkmark"></span>
                    </label>
                </li>
            </ul>
            <a href="#0" class="btn_1">Añadir item</a>
    </div>
</div>

Y mi javascript para obtener la información esta así

$(".dropdown-menu a.btn_1").on('click', function() {
 var fila = $(this).parents("tr");
 var valores = "";
 var cantidad = fila.find(".cantidadProducto").val();
 var nombre =fila.find(".nombre_producto").text();
 var costo =fila.find(".costo_producto").text();
 var idp =fila.find(".id_producto").text();

 var ul = fila.find(".ul_extras");

 var lis=fila.querySelectorAll(".ul_extras input[type=checkbox]:checked")

 var formData = new FormData();
 formData.append('nombre',nombre);
 formData.append('cantidad',cantidad);
 formData.append('costo',costo);
 formData.append('id',idp);
 formData.append('op','1');
 $(this).closest(".dropdown-menu").prev().dropdown("toggle");           
});

Espero sus comentarios, Gracias.

1 respuesta 1

1

Lo que puedes hacer es seleccionar el ul primero y recorre cada li con un each para ir obteniendo los inputs seleccionados, despues haces una condicion para solo filtrar los activos y por ultimo tomas el valor que quieras de ese input activo, asi

$(".dropdown-menu a.btn_1").on('click', function() {
  $(this).parent().find('.ul_extras li').each(function() {
    var check = $(this).find('input').prop('checked');
    if (check){
      console.log($(this).find('input').parent().find('span').text());
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td class="options">
<div class="dropdown dropdown-options">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
        <i class="icon_plus_alt2"></i>
    </a>
    <div class="dropdown-menu">
        <h5>Agregar extras</h5>
<a href="#0" class="btn_1">Obtener seleccionados</a>
            <ul class="clearfix ul_extras">                                          
                <li>
                    <label class="container_check"><span clas="nombre_extra">crema uno</span><small>+ $2.56</small>
                        <input type="checkbox" class="check_activo">
                        <span class="checkmark"></span>
                    </label>
                </li>
                <li>
                    <label class="container_check"><span clas="nombre_extra">Fresas</span><small>+ $0.50</small>
                        <input type="checkbox" class="check_activo">
                        <span class="checkmark"></span>
                    </label>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <label class="container-fluid">Ingrese cantidad<small></small>
                        <input type="text" value="1" name="options_1" class="cantidadProducto">
                        <span class="checkmark"></span>
                    </label>
                </li>
            </ul>
    </div>
</div>

Una cosa mas aclarar, estoy haciendo el uso del prop, esto se encarga de obtener el valor de una propiedad, en este caso el checked, para mas informacion aqui prop

3
  • Gracias, ya lo reviso. Commented el 12 dic. 2020 a las 14:15
  • @AlldesignWeb recuerda si es la respuesta que buscas, acepta como respuesta en el check Commented el 12 dic. 2020 a las 15:04
  • Perfecto, adicional hice una linea console.log($(this).find('input').val()) para obtener el value del input. Commented el 12 dic. 2020 a las 17:57

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.