How to select only 1 radio button from 3 different lists, jquery?

Navigation
0

I have the following list that is shown as follows: 

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

The detail I have is that of those 3 lists only one radio button must be selected. As you will see in the property name they all have the same. But when doing tests the 3 are selected, how can I correct this. With these functions I get your values. 

$('.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);
    });
    
asked by JG_GJ 12.10.2018 в 21:09
source

1 answer

1

Let's see, try the following changes in the code you use to listen to click events. In addition I am going to join the code of the listeners in one only because it is the same in all the cases: 

$('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");
});

Once the previous listener has been defined, you can delete all of these: 

$('.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>
    
answered by 12.10.2018 / 23:07
source
I want to associate a computed properties to a vector but it returns the length not the vector Update and Select in the same sentence