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.