Fill radio buttom and check through a for with data from the Javascript server

Without testing any of your code I see several things that are not entirely correct, such as adding an option element to an input, the option element has to be explicitly the child of the select element.

Apart from this I see another thing, you are supposedly trying to create a radio button, because for this you would have to use inputs, you have to use the type property with the radio value, that is type="radio"

Here an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

You have the error in this line:

$("#lstProductosListado").html(sOption);

Why ? Well, because I can't see any element of the html that you have passed with this id, the closest one and I suppose you mean this: #lstProductosListado3

Apart from all this what I have told you, comment that for the radios to be exclusive, you have to give them the same name.

So in the "sOption +=" that you have in the for loop, put the following:

sOption += "<input type='radio' name='producto' value='"+listadoProductos[i].nombre+"'>";

Also comment that it is not a good practice to use the html() function because if, for example, you already have child elements in the element where you use this function, it will eliminate them, I recommend using the append or appendTo function .

You use the list of products as an array which is a bit weird, I would do the following:

//Primero conseguiría vía el selector, el elemento donde quisiera poner la lista de radios.

let listaAqui = $(".form-group div.col-md-4").first();

//Ahora usaría lo que es el JSON.parse para iterar sobre cada clave y valor, obviamente nos interesa el valor, destacar que no se como es la estructura de tu JSON así que me la inventare

/*Así es como creo que es tu estructura 
{"1" : {"idproducto" : 1, "nombre" : "NombreProducto"},...}
*/

//Una vez sabido esto vamos al lio, ejemplo completo:

$(function(){

    let listaAqui = $(".form-group div.col-md-4").first();

    JSON.parse('{"1" : {"idproducto" : 1, "nombre" : "Lena"}, "2" : {"idproducto" : 2, "nombre" : "Lena2"}}', function(k, v){
        
        if(this instanceof Object && k === "idproducto"){
            
            
            $(listaAqui).append($("<div></div>").append($("<input/>").attr({type : "radio", name : "producto", id : this.idproducto, value : this.idproducto}))
                                                .append($("<label></label>").attr("for", this.idproducto).text(this.nombre)));
            
        }

    });

});

In the case of the checkbox it is similar, here I give you the syntax:

https://developer.mozilla.org/en/docs/Web/HTML/Element/input/checkbox

It would be the same as before, concatenate it as you see it, referring to the example you use with the html() method

Finally comment that I suppose you have tested that the return of data is correct via the debugger, anyway, I recommend you to use the $.ajax() function, if you want to use my example on the data addition, adapt it to your Project.

I'm going to leave you the HTML and the JS so that you can better see how to adapt it, also remember to use jquery locally, you would have to change the src of the script element.

HTML: https://pastebin.com/MrAeawm8

JS: https://pastebin.com/8b1XymzK

The latter is the one of good practice.

To begin with you are introducing with the hmtl() method where it is not:

   <div class="form-group">
      <label class="col-md-4 control-label" for="lstProductosListado3">Producto</label>
      <div class="col-md-4" id="opciones">
        <input type="Radio" id="lstProductosListado3" name="lstProductosListado3" class="form-control">
      </div>
    </div>

Then with the html() method:

$("#opciones").html(sOption);