Change background of a card when radio selected

My question is very simple : how to add a background color to my card element when the button radio is selected ?

<div class="col-6 col-md-3 mt-4 text-center my-auto">
            <label for="'.$abreviation.'">
                <div class="card card-block d-flex">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'" class="check-on" /> '.$tri.'
                    </div>
                </div>
            </label>
        </div>

Is there any way to achieve this with just css or I have to use javascript or jquery ? I tried to do this but all of the cards are in a red backgroundColor instead of just the card where the radio is selected.

    $(document).ready(function(){

        $(".check-on").click(function(){

          $('.check-on').parent().parent().addClass('backgroundCard') 

        });

    });

Thanks a lot for your help.

1. You don't need to bind a label to an input with the for attribute when the input tag is inside a label tag.
2. The card can be styled without any JS. To do this, you can place a card next to the input field, hide the input using the d-none class, and use the adjacent element combinator.

Try to click the cards. They work as radio buttons now.

input[type="radio"]:checked + .card {
  background: #f1f1f1;
}

<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label>
        <input type="radio" name="tri" value="'.$abreviation.'" class="d-none" />
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label>
        <input type="radio" name="tri" value="'.$abreviation2.'" class="d-none" /> 
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

$(document).ready(function(){
    $(".check-on").click(function(){
          $(this).parent().parent().addClass('backgroundCard')
    });
});

once you have focused on the clicked element, keep focus on that only using this selector. You where again selecting all by class