正在寻找重构我创建的div切换的jQuery代码的方法

Question

我写了一些代码时考虑了三件事：

1. 使用“点击”突出显示选区的边框。
2. 选择一个项目将从其他项目中删除突出显示。
3. 能够在点击时取消选择每个项目。

我已经设法让所有东西都工作了，但我并不特别喜欢在选择一个项目时出现的径向点代码的复杂程度。

下面是我正在谈论的一个例子，特别是我正在寻找将下面的代码重构为更易读（更短）的方法。

$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
       .siblings().children('.radial').children().removeClass('checked');

以下是更多上下文（第10行）的工作示例：

var raceInternet = false;
var racePhone = false;
var raceTv = false;

$(function() {
  var $targetDiv = $('#race-internet > .itembox');
  var $radialDot = $('.radial > .center-dot');
  $targetDiv.on('click', function() {
    $(this).toggleClass('user-selected').siblings().removeClass('user-selected');
    //Is it possible to refactor Line 10?
    $(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
    if ($targetDiv.is('.user-selected')) {
      raceInternet = true;
    } else {
      raceInternet = false;
    }
  })
})

.itembox-container {
  display: flex;
}
.boxes-2 {
  width: calc((100% - 25px)/2);
  margin: 10px;
  padding: 10px;
}
.itembox {
  position: relative;
  display: inline-block;
  border: 5px solid #e8e8e8;
  border-radius: 10px;
  cursor: pointer;
}
.user-selected {
  border: 5px solid #E16E5B;
}
.itembox h4 {
  color: #22ddc0;
  font-weight: 700;
}
span.price {
  display: inline-block;
  font-weight: 400;
  float: right;
  color: #22ddc0;
}
.itembox > ul {
  list-style: none;
}
.itembox > ul > li {
  line-height: 3;
}
.radial {
  position: absolute;
  float: right;
  height: 35px;
  width: 35px;
  padding: 2px;
  border: 5px solid #e8e8e8;
  border-radius: 50%;
  top: 43%;
  right: 10px;
}
.center-dot {
  display: none;
  position: relative;
  height: 21px;
  width: 21px;
  background-color: #E16E5B;
  border-radius: 50%;
}
.checked {
  display: block;
}
.prime-aux:first-of-type {
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <!-- Primary Content Container -->
  <div class="prime-aux">
    <div id="race-internet" class="itembox-container">
      <div class="itembox boxes-2">
        <h4>Gigabit Internet <span class="price">$60/mo</span></h4>
        <ul>
          <li>1,000 Mbps</li>
          <li>No data caps</li>
        </ul>
        <div class="radial">
          <div class="center-dot"></div>
        </div>
      </div>
      <div class="itembox boxes-2">
        <h4>Basic Internet <span class="price">$25/mo</span></h4>
        <ul>
          <li>25 Mbps</li>
          <li>No data caps</li>
        </ul>
        <div class="radial">
          <div class="center-dot"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Primary Content Container End -->

View on JS Fiddle