javascript - 单选按钮状态在鼠标松开或单击时未更新

Question

我正在为单选按钮使用自定义图像，因此我的单选按钮被隐藏，并且我正在为该单选按钮使用标签，如下所示:-

Click here for JS fiddle link

$('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>

问题是每当我检查单选按钮时，当我在函数内部时，我检查的单选按钮状态不会更新。因此，我将之前检查的单选按钮作为值而不是当前检查的值。

Answer 1

a) 使用键盘的人无法访问您的解决方案

b)如果您监听输入的变化，它应该可以工作:

https://jsfiddle.net/x31epgot/6/

$('body').on('change', 'input', function(){
});