如何獲得復選框的最新檢查值？

Question

我有以下代碼將獲取復選框的值，但沒有被檢查到最新的代碼，它將獲取復選框的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。 謝謝！

Answer 1

要做到這一點，你必須當復選框被檢查要記住。 一種方法是對元素使用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> 

也就是說，可以在其中拖移項目的列表可能會帶來更好的用戶體驗。