javascript - 如何获取最后选择的单选按钮 ID

Question

我有两个带有一些单选按钮的 UL 列表。现在我想从其 UL 中获取最后选择的单选按钮 ID attribute。

例如:

• 如果我从第一个UL中选择了单选按钮，则返回所选单选ID。
• 如果我从第二个UL中选择了单选按钮，则返回选定的单选ID。

我已尝试以下代码，但无法正常工作。如果您尝试从第一个UL中选择第一个单选按钮，您将收到所选ID的警报，但是当您从第二个UL中选择单选按钮时，您将收到警报将从第一个 UL 收到警报，但我不想要。 :(

我想从该 UL 获取最后检查的单选按钮 ID。

知道如何做到这一点吗？

您可以通过以下方式检查吗:

• 首先从第一个 UL 中选择 20 个，您将获得 20 个。
• 从第二个 UL 中选择 80，您将得到 80。

现在再次更改第一个 UL 的单选按钮，并更改我想要的单选 ID。

这是我的 JSFiddle .

谢谢。

$("#update_cart").click(function() {
  var radioID = $("input[type='radio']:checked").attr("id");
  if (radioID) {
    alert(radioID);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="one">
  <li>
    <label for="1" class="label_check">
      <input type="radio" id="1" name="one" value="10">10
    </label>
  </li>

  <li>
    <label for="2" class="label_check">
      <input type="radio" id="2" name="one" value="20">20
    </label>
  </li>

  <li>
    <label for="3" class="label_check">
      <input type="radio" id="3" name="one" value="30">30
    </label>
  </li>

  <li>
    <label for="4" class="label_check">
      <input type="radio" id="4" name="one" value="40">40
    </label>
  </li>

  <li>
    <label for="5" class="label_check">
      <input type="radio" id="5" name="one" value="50">50
    </label>
  </li>
</ul>

<ul class="two">
  <li>
    <label for="6" class="label_check">
      <input type="radio" id="6" name="two" value="40">60
    </label>
  </li>

  <li>
    <label for="7" class="label_check">
      <input type="radio" id="7" name="two" value="70">70
    </label>
  </li>

  <li>
    <label for="8" class="label_check">
      <input type="radio" id="8" name="two" value="100">80
    </label>
  </li>

  <li>
    <label for="9" class="label_check">
      <input type="radio" id="9" name="two" value="120">90
    </label>
  </li>

  <li>
    <label for="10" class="label_check">
      <input type="radio" id="10" name="two" value="120">100
    </label>
  </li>
</ul>

<input type="button" id="update_cart" class="update_cart" value="Update Cart">

Answer 1

使用

$("#update_cart").click(function () {
  var radioID = $("input[type='radio'].active").attr("id");
  if (radioID) {
      alert(radioID);
  }
});

$("input[type='radio']").click(function(){
  $('.active').removeClass('active');
     $(this).addClass('active');
});

Working Demo