Use Case:
A radio button is used to select from the three cards. The radio button is displayed inside the card and the card color will then change if the card is selected

In your page (ex. changecard.blade.php), create three cards displayed in a grid view.

<div class="row mt-3">
      <h4 class="text-center">Change Card Color Demo</h4>
</div>
<div class="row justify-content-center">
     
      <div class="col-md-3">
          <div class="card">
               <div class="card-header">
                   <input type="radio" name="selected_cat" id="radiocat" class="checkcard" value="1" style="margin-right: 5px" required>  Card 1
               </div>
               <div class="card-body">
                    This is Card One
               </div>
          </div>
      </div>
      
      <div class="col-md-3">
          <div class="card">
              <div class="card-header">
                   <input type="radio" name="selected_cat" id="radiocat" class="checkcard" value="2" style="margin-right: 5px" required>  Card 2
              </div>
              <div class="card-body">
                      This is Card Two 
              </div>
         </div>
      </div>

      <div class="col-md-3">
            <div class="card">
                 <div class="card-header">
                    <input type="radio" name="selected_cat" id="radiocat" class="checkcard" value="3" style="margin-right: 5px" required>  Card 3
                 </div>
                 <div class="card-body">
                     This is Card Three
                 </div>
            </div>
       </div> 
</div>

Create a CSS file (customcss.css) This is where all our custom CSS will be placed.

.card.cardColor {
  background: lightgreen;
}

Add the path of the custom css file in your page.

  <link href="{{asset('custom/customcss.css')}}" rel="stylesheet"/>

Create a page that will have all our custom javascripts (ex. customscripts.blade.php)

@section('customscript')
<script>

    $(document).ready(function(){
        $('input[type="radio"]').on('click', function(){
            console.log("test")
            $(this).parent().parent().addClass('cardColor')
        });

        $('.checkcard').on('change', function() {
            let radioName = $(this).attr('name');
            $(`.checkcard[name=${radioName}]`).closest('.card.cardColor').removeClass('cardColor');
            $(this).closest('.card').addClass('cardColor');
        });

    });
</script>
@endsection   

Include the javascripts page in the changecard page

@include('customscripts')
@yield("customscript")

Watch the tutorial video: