0

Tengo el siguiente listado que se muestra de la siguiente forma:

introducir la descripción de la imagen aquí

<tbody id="productos_lista1" class="productos_lista1">
                                <tr>
                                    <td class="nuevo-td codProducto">32155</td>
                                    <td class="nuevo-td descripcionProducto">Giordani Gold Man Eau de Tollette</td>
                                    <td class="nuevo-td">
                                    <label class="label-radio item-content">
                                        <input type="radio" name="producto" class="producto" value="1"  />
                                        <span class="item-media">
                                            <i class="icon icon-form-radio"></i>
                                        </span>
                                    </label>
                                    </td>
                                    <td class="label-cell">
                                       0
                                    </td>
                                </tr>
                            </tbody>
<tbody id="productos_lista2" class="productos_lista2">
                            <tr>
                                <td class="nuevo-td codProducto">34369</td>
                                <td class="nuevo-td descripcionProducto">Brillo labial COLOURBOX</td>
                                <td class="nuevo-td">
                                <label class="label-radio item-content">
                                    <input type="radio" name="producto" class="producto" value="1"  />
                                    <span class="item-media">
                                        <i class="icon icon-form-radio"></i>
                                    </span>
                                </label>
                                </td>
                                <td class="label-cell">
                                   0
                                </td>
                            </tr>
                        </tbody>
tbody id="productos_lista3" class="productos_lista3">
                            <tr>
                                <td class="nuevo-td codProducto">10917</td>
                                <td class="nuevo-td descripcionProducto">Fresh nautre color</td>
                                <td class="nuevo-td">
                                <label class="label-radio item-content">
                                    <input type="radio" name="producto" class="producto" value="1"  />
                                    <span class="item-media">
                                        <i class="icon icon-form-radio"></i>
                                    </span>
                                </label>
                                </td>
                                <td class="label-cell">
                                   0
                                </td>
                            </tr>
                        </tbody>

El detalle que tengo es de que de esas 3 listas unicamente se debe seleccionar un radio button. Como veran en la propiedad nametodos tienen el mismo. Pero al realizar pruebas se seleccionan las 3, como puedo corregir esto. Con estas funciones obtengo sus valores.

$('.productos_lista1').on('click', '.producto', function(){
        let productos = $(this).closest('tr');
        let codProducto = productos.find('.codProducto').text();
        let descripcionProducto = productos.find('.descripcionProducto').text();
        let valor_producto = $(this).val();

        console.log(codProducto);
        console.log(descripcionProducto);
        console.log(valor_producto);
     });
    $('.productos_lista2').on('click', '.producto', function(){
        let productos = $(this).closest('tr');
        let codProducto = productos.find('.codProducto').text();
        let descripcionProducto = productos.find('.descripcionProducto').text();
        let valor_producto = $(this).val();

        console.log(codProducto);
        console.log(descripcionProducto);
        console.log(valor_producto);
    });

    $('.productos_lista3').on('click', '.producto', function(){
        let productos = $(this).closest('tr');
        let codProducto = productos.find('.codProducto').text();
        let descripcionProducto = productos.find('.descripcionProducto').text();
        let valor_producto = $(this).val();

        console.log(codProducto);
        console.log(descripcionProducto);
        console.log(valor_producto);
    });
4
  • ¿Hola, cuál es el contexto involucrado en la selección? Por ejemplo: si quiero seleccionar el radio button asociado a producto_lista2 haría lo siguiente: $(".producto_lista2").find("input[type='radio']").prop("checked", true). O en el caso de tener una versión vieja de JQuery: $(".producto_lista2").find("input[type='radio']").attr("checked", "checked")
    – D. Smania
    Commented el 12 oct. 2018 a las 19:57
  • en que de esas 3 listas solo tengo permitido seleccionar 1 radio button.
    – JG_GJ
    Commented el 12 oct. 2018 a las 20:35
  • A ver si entiendo: ¿cada vez que haces click en un radio button se debería quitar la selección en el resto?
    – D. Smania
    Commented el 12 oct. 2018 a las 20:46
  • Al inicio no habrá ningun check seleccionado, entonces en ese caso no tendre la opcion de elegir cualquiera de los 3, pero si por ejemplo selecciono el primero, yo puedo tener la opcion de cambiar a otro check,como si tuviera la funcion normal de tener varios radio button con el mismo name.
    – JG_GJ
    Commented el 12 oct. 2018 a las 20:52

1 respuesta 1

1

A ver, probá con los siguientes cambios en el código que usas para escuchar los eventos de click. Además voy a juntar el código de los listeners en uno sólo porque es el mismo en todos los casos:

$('input.producto').on('click', function()
{
    let productos = $(this).closest('tr');
    let codProducto = productos.find('.codProducto').text();
    let descripcionProducto = productos.find('.descripcionProducto').text();
    let valor_producto = $(this).val();

    console.log(codProducto);
    console.log(descripcionProducto);
    console.log(valor_producto);

    // Eliminamos la seleccion en todos los radio buttons que
    // estaban seleccionados.

    $('.producto').removeProp("checked");
    $(this).prop("checked", true);

    // Si usas version vieja de JQuery, tenés que usar las siguientes
    // líneas en reemplazo de las anteriores.

    //$('.producto').removeAttr("checked");
    //$(this).attr("checked", "checked");
});

Una vez definido el listener anterior, podes borrar todos estos:

$('.productos_lista1').on('click', '.producto', function()
{
    let productos = $(this).closest('tr');
    let codProducto = productos.find('.codProducto').text();
    let descripcionProducto = productos.find('.descripcionProducto').text();
    let valor_producto = $(this).val();

    console.log(codProducto);
    console.log(descripcionProducto);
    console.log(valor_producto);
});
$('.productos_lista2').on('click', '.producto', function()
{
    let productos = $(this).closest('tr');
    let codProducto = productos.find('.codProducto').text();
    let descripcionProducto = productos.find('.descripcionProducto').text();
    let valor_producto = $(this).val();

    console.log(codProducto);
    console.log(descripcionProducto);
    console.log(valor_producto);
});
$('.productos_lista3').on('click', '.producto', function()
{
    let productos = $(this).closest('tr');
    let codProducto = productos.find('.codProducto').text();
    let descripcionProducto = productos.find('.descripcionProducto').text();
    let valor_producto = $(this).val();

    console.log(codProducto);
    console.log(descripcionProducto);
    console.log(valor_producto);
});

$('input.producto').on('click', function()
{
    let productos = $(this).closest('tr');
    let codProducto = productos.find('.codProducto').text();
    let descripcionProducto = productos.find('.descripcionProducto').text();
    let valor_producto = $(this).val();

    console.log(codProducto);
    console.log(descripcionProducto);
    console.log(valor_producto);

    // Eliminamos la seleccion en todos los radio buttons que
    // estaban seleccionados.

    $('.producto').removeProp("checked");
    $(this).prop("checked", true);

    // Si usas version vieja de JQuery, tenés que usar las siguientes
    // líneas en reemplazo de las anteriores.

    //$('.producto').removeAttr("checked");
    //$(this).attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tbody>

<tr>
    <td class="nuevo-td codProducto">32155</td>
    <td class="nuevo-td descripcionProducto">Giordani Gold Man Eau de Tollette</td>
    <td class="nuevo-td">
        <label class="label-radio item-content">
            <input type="radio" name="producto" class="producto" value="1"/>
            <span class="item-media">
                <i class="icon icon-form-radio"></i>
            </span>
        </label>
    </td>
    <td class="label-cell">0</td>
</tr>

<tr>
    <td class="nuevo-td codProducto">34369</td>
    <td class="nuevo-td descripcionProducto">Brillo labial COLOURBOX</td>
    <td class="nuevo-td">
        <label class="label-radio item-content">
            <input type="radio" name="producto" class="producto" value="1"/>
            <span class="item-media">
                <i class="icon icon-form-radio"></i>
            </span>
        </label>
    </td>
    <td class="label-cell">0</td>
</tr>

<tr>
    <td class="nuevo-td codProducto">10917</td>
    <td class="nuevo-td descripcionProducto">Fresh nautre color</td>
    <td class="nuevo-td">
        <label class="label-radio item-content">
            <input type="radio" name="producto" class="producto" value="1"/>
            <span class="item-media">
                <i class="icon icon-form-radio"></i>
            </span>
        </label>
    </td>
    <td class="label-cell">0</td>
</tr>

</tbody>
</table>

6
  • Me sigue dejando los 3 check seleccionados.
    – JG_GJ
    Commented el 12 oct. 2018 a las 21:23
  • Ahí agregue un ejemplo donde entiendo funciona bien, quizás estés utilizando algún plugin o librería arriba de los checks y la forma de desmarcarlos es diferente.
    – D. Smania
    Commented el 12 oct. 2018 a las 21:36
  • Estimado una consulta, Estará bien que esten en tres 3 tables es decir cada tbody en su tabla. Como se haría para esa forma. cada tabla con su tbody que contiene productos_lista
    – JG_GJ
    Commented el 12 oct. 2018 a las 22:17
  • Ahí probe esa modificación en el ejemplo, y si bien los checkboxes siguen funcionando normal, se pierde la alineación por columnas, es decir, por ejemplo, los checkboxes no van a estar en la misma línea vertical, y lo mismo para los otros casos. Podés probar en tu caso si ocurre lo mismo, o si los estilos que tenés aplicados lo solucionan. Yo lo hubiera hecho con un solo <tbody> y cada wrapper de producto en una fila diferente.
    – D. Smania
    Commented el 13 oct. 2018 a las 2:45
  • Ahí modifique el snippet para que use un sólo <tbody>, porque me parece queda mucho más simple el código html. Si agregás la parte CSS o librerías/plugins que estas utilizando en tu pregunta, quizás podemos ver como queda en tu caso particular.
    – D. Smania
    Commented el 13 oct. 2018 a las 2:50

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.