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

Question

I have the following code that would get the value of the checkbox, but not the one that is checked the latest, it get the last(?) value of the checkbox. I would like to get the value of the checkbox that is recently checked.

This is my 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>

This is my script.

<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>

With the following code, if I check Mike first, then John, I could see the latest choice changing from Mike to John. However, if I selected John first and select Mike, the value of latest choice would not change to Mike. Thank you!

Answer 1

To do that, you'll have to remember when the checkboxes were checked. One way to do that is to use jQuery's data cache for elements, see comments:

$(".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);
  }
});

Live Example:

 $(".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> 

That said, a list you can drag items around in might make for a better UX.