When I select a radio button, should it replace the image with another one?
function getAirlinesById(idAirlines) {
$.ajax({
dataType: 'json',
type: "POST",
url: '{{route('get-baggage-airlines')}}',
data:"airlines_id="+idAirlines,
success: function(response){
console.log(response);
$("#baggageAirline").empty();
for(let i=0;i<response.length;i++){
let category = response[i].baggage.category;
switch(category) {
case 1:
category = "KG";
break;
case 2:
category = "PCS";
break;
};
$("#baggageAirline").append('<div class="col-3 list-baggage"><input type="radio" class="input-radio-costum" required onclick="getPrice('+response[i].price_in_SGD+')" onchange="changeBackground('+response[i].baggage.config_baggage_id+')" name="baggage" value="'+response[i].baggage.max_range+' '+category+'"><img src="{{asset("assets/image/baggage.png")}}" class="image-default" id="image-selected'+response[i].baggage.config_baggage_id+'"><p class="baggage-amount">'+response[i].baggage.max_range+' '+category+'</p><p class="text-center tcc">'+response[i].currency_symbol+' '+response[i].price_in_SGD+'</p></input></div>');
}
},
error: function(xhr, status, error) {
alert('ERR_CONNECTION_TIMED_OUT');
location.reload();
}
});
}
I have attempted to implement this feature, but the selected image remains unchanged and all options are selected. Only one should be chosen as it uses a radio button.
function changeBackground(idBaggage){
$('#image-selected'+idBaggage).css({
'background-image' : "url('assets/image/baggageblack.png')",
'margin-top' : '-30px',
});
}