jQuery change parent div radio input with different background

Question

Within a form, I have inserted four radio inputs; the code is as follows:

jQuery(document).ready(function($) {
  $("#checkact1").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').addClass('st1_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact2").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').addClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact3").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').addClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact4").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').addClass('st4_bk_color');
    }
  });
});

#form .col:nth-child(1) input[type="radio"]:checked,
#form .col:nth-child(2) input[type="radio"]:checked,
#form .col:nth-child(3) input[type="radio"]:checked,
#form .col:nth-child(4) input[type="radio"]:checked {
  border-color: #FF1493;
  background-color: #FF1493;
  box-shadow: none;
}

#form .col:nth-child(1) input[type="radio"]:checked+label,
#form .col:nth-child(1) input[type="radio"]:checked+label span,
#form .col:nth-child(2) input[type="radio"]:checked+label,
#form .col:nth-child(2) input[type="radio"]:checked+label span,
#form .col:nth-child(3) input[type="radio"]:checked+label,
#form .col:nth-child(3) input[type="radio"]:checked+label span,
#form .col:nth-child(4) input[type="radio"]:checked+label,
#form .col:nth-child(4) input[type="radio"]:checked+label span {
  color: #FFFFFF !important;
}

.st0_bk_color {
  background-color: #f5f8fa !important;
}

.st1_bk_color {
  background-color: #7e8299 !important;
}

.st2_bk_color {
  background-color: #20c997 !important;
}

.st3_bk_color {
  background-color: #7239ea !important;
}

.st4_bk_color {
  background-color: #fd7e14 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div class="col">
    <div id="ck01">
      <input type="radio" name="checkact" id="checkact1" value="option1" checked>
      <label for="checkact1"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div class="col">
    <div id="ck02">
      <input type="radio" name="checkact" id="checkact2" value="option2" checked>
      <label for="checkact2"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div class="col">
    <div id="ck03">
      <input type="radio" name="checkact" id="checkact3" value="option3" checked>
      <label for="checkact3"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div class="col">
    <div id="ck04">
      <input type="radio" name="checkact" id="checkact4" value="option4" checked>
      <label for="checkact4"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
</form>

How can I write it better and optimize it?