单选按钮状态在鼠标上升或点击时没有更新

我使用一个自定义图像的单选按钮，所以我的单选按钮是隐藏的，我使用一个标签为该单选按钮，像这样:-

点击这里查看JS提琴链接

$('body').on('mouseup', 'label.q1odiv', function() {
  if ($('input:radio[name="radio1"]').is(':checked')) {
    // My code here
    // I want to access currently checked radio button's value here
  }
});

input[type=radio],
input[type=checkbox] {
  display: none;
}
input[type=radio] + label {
  display: block;
  cursor: pointer;
  background-image: url("http://www.clker.com/cliparts/8/V/0/V/G/Z/radiobutton-unchecked-th.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 2vw;
}
input[type=radio]:checked + label {
  background-image: url("http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png");
}
.radio-btn {
  width: 2vw;
  height: 2vw;
}
.options-text-div {
  margin: 0 3vw;
  font-size: 2vw;
  line-height: 2.2vw;
  width: 25vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options" id="options1">
  <input type="radio" id="q1o0" name="radio1" checked="checked">
  <label for="q1o0" class="radio-btn q1odiv">
    <div class="im-fell-dw-pica-font options-text-div ">Kicks</div>
  </label>
  <input type="radio" id="q1o1" name="radio1">
  <label for="q1o1" class="radio-btn q1odiv">
    <div class="im-fell-dw-pica-font options-text-div ">Flip Flops</div>
  </label>
  <input type="radio" id="q1o2" name="radio1">
  <label for="q1o2" class="radio-btn q1odiv">
    <div class="im-fell-dw-pica-font options-text-div ">Stilletos</div>
  </label>
  <input type="radio" id="q1o3" name="radio1">
  <label for="q1o3" class="radio-btn q1odiv">
    <div class="im-fell-dw-pica-font options-text-div ">Boots</div>
  </label>
  <input type="radio" id="q1o4" name="radio1">
  <label for="q1o4" class="radio-btn q1odiv">
    <div class="im-fell-dw-pica-font options-text-div ">Wedges</div>
  </label>
</div>

问题是每当我检查一个单选按钮时，我检查的单选按钮状态没有更新，而我在函数内。因此，我使用之前选中的单选按钮作为值，而不是当前选中的。