javascript - 如何获得复选框的最新检查值？

我有以下代码将获取复选框的值，但没有被检查到最新的代码，它将获取复选框的last（？）值。我想获取最近选中的复选框的值。

这是我的html。

<div class="custom-control custom-checkbox">
  <input
    type="checkbox"
    class="custom-control-input chkbx"
    value="123456"
    data-valuetwo="Mike"
    id="customCheck32"
    name="choice[]"
  />
  <label class="custom-control-label" for="customCheck32">Mike</label>
</div>

<div class="custom-control custom-checkbox">
  <input
    type="checkbox"
    class="custom-control-input chkbx"
    value="6542321"
    data-valuetwo="John"
    id="customCheck33"
    name="choice[]"
  />
  <label class="custom-control-label" for="customCheck33">John</label>
</div>

<div id="selecteditems" style="border: 1px solid black"></div>

<div class="itemhead"></div>

这是我的剧本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(".chkbx").click(function() {
    var selected = "";
    var latestchoice = "";
    $(".chkbx:checked").each(function() {
      selected += $(this).attr("data-valuetwo") + "<br>";
      latestchoice = $(this).attr("data-valuetwo");
    });
    $("#selecteditems").html(selected);

    if ($(".itemhead").is(":empty")) {
      $(".itemhead").html(latestchoice);
    } else {
      $(".itemhead").empty();
      $(".itemhead").html(latestchoice);
    }
  });
</script>

使用以下代码，如果我先检查Mike，然后再检查John，则可以看到最新的选择从Mike更改为John。但是，如果我先选择John并选择Mike，则最新选择的值将不会更改为Mike。谢谢！

最佳答案

为此，您必须记住选中复选框的时间。一种方法是对元素使用jQuery的数据缓存，请参见注释：

$(".chkbx").click(function() {
  var $this = $(this);
  // If this checkbox is checked...
  if (this.checked) {
    // ...remember when
    $this.data("checked", Date.now());
  } else {
    // Not checked, remove the data
    $this.removeData("checked");
  }
  var selected = "";
  var latestchoice = "";
  // Get and sort the checked checkboxes
  var checked = $(".chkbx:checked").get().sort(function(a, b) {
    return $(a).data("checked") - $(b).data("checked");
  });
  // Loop through them in sorted order
  checked.forEach(function(cb) {
    var $cb = $(cb);
    selected += $cb.attr("data-valuetwo") + "<br>";
    latestchoice = $cb.attr("data-valuetwo");
  });
  $("#selecteditems").html(selected);

  if ($(".itemhead").is(":empty")) {
    $(".itemhead").html(latestchoice);
  } else {
    $(".itemhead").empty();
    $(".itemhead").html(latestchoice);
  }
});

现场示例：

$(".chkbx").click(function() {
  var $this = $(this);
  // If this checkbox is checked...
  if (this.checked) {
    // ...remember when
    $this.data("checked", Date.now());
  } else {
    // Not checked, remove the data
    $this.removeData("checked");
  }
  var selected = "";
  var latestchoice = "";
  // Get and sort the checked checkboxes
  var checked = $(".chkbx:checked").get().sort(function(a, b) {
    return $(a).data("checked") - $(b).data("checked");
  });
  // Loop through them in sorted order
  checked.forEach(function(cb) {
    var $cb = $(cb);
    selected += $cb.attr("data-valuetwo") + "<br>";
    latestchoice = $cb.attr("data-valuetwo");
  });
  $("#selecteditems").html(selected);

  if ($(".itemhead").is(":empty")) {
    $(".itemhead").html(latestchoice);
  } else {
    $(".itemhead").empty();
    $(".itemhead").html(latestchoice);
  }
});

<div class="custom-control custom-checkbox">
  <input
    type="checkbox"
    class="custom-control-input chkbx"
    value="123456"
    data-valuetwo="Mike"
    id="customCheck32"
    name="choice[]"
  />
  <label class="custom-control-label" for="customCheck32">Mike</label>
</div>

<div class="custom-control custom-checkbox">
  <input
    type="checkbox"
    class="custom-control-input chkbx"
    value="6542321"
    data-valuetwo="John"
    id="customCheck33"
    name="choice[]"
  />
  <label class="custom-control-label" for="customCheck33">John</label>
</div>

<div id="selecteditems" style="border: 1px solid black"></div>

<div class="itemhead"></div>
This is my script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

也就是说，可以在其中拖移项目的列表可能会带来更好的用户体验。