Can I make the background change when a radio button is selected?

Question

So I am struggling a bit with the code and I can't get it to work. And I'm pretty new to HTML and CSS so my knowledge is limited to what I've got now.

I want to make a background from a section change when a radio button is checked. I tried using the :checked but that doesn't help. And perhaps I'm forgetting someting but again, my knowledge is limited. So Please help me a bit. I really want to learn it!!

This is the code I've got so far:

https://www.w3schools.com/code/tryit.asp?filename=GM1G8536IJ2O

function clearRadioButtons() {
  var radioButtonArray = document.getElementsByName('radioList');

  for (var i = 0; i < radioButtonArray.length; i++) {
    var radioButton = radioButtonArray[i];
    radioButton.checked = false;
  }
}

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default radio button */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  border-color: black;
  transition: all 200ms;
  border: 1px solid #e0e0e0;
}


/* On mouse-over, grey background color */

.container:hover input~.checkmark {
  background-color: #e0e0e0;
  transition: all 200ms;
  border: 1px solid white;
}


/* When the radio button is checked */

.container input:checked~.checkmark {
  background-color: #a4e813;
  transition: all 200ms;
  border: 1px solid white;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */

.container .checkmark:after {
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
}

.tekst {
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

.sectie {
  background: #fcfcfc;
  padding: 15px;
  max-width: 500px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  margin-bottom: 20px;
  transition: all 400ms;
}


/* This is the CSS that I need when the radio button is checked */

.sectie:hover {
  box-shadow: 0px 0px 10px -5px gray;
  transition: all 400ms;
  border: 1px solid #a4e813;
  background: #f5ffe0;
}

.ongedaanknop {
  padding: 10px;
  background: white;
  border: 1px solid gray;
  border-radius: 50px;
  transition: all 200ms;
}

.ongedaanknop:hover {
  background: #cf7c69;
  color: white;
  transition: all 200ms;
  border: 1px solid white;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="sectie"><label class="container">Regulier 30 minuten examen
 <input type="radio" name="radioList" value="off">
 <span class="checkmark"></span><p class="tekst">Dit is een test</p>
</label></div>
<div class="sectie"><label class="container">Verlengd examen 45 minuten
 <input type="radio" name="radioList" value="off">
 <span class="checkmark"></span><p class="tekst">Dit is een test</p>
</label></div>
<input class="ongedaanknop" type="button" onclick="clearRadioButtons();" value="Selectie ongedaan maken" />