我有以下代码将获取复选框的值,但没有被检查到最新的代码,它将获取复选框的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>
也就是说,可以在其中拖移项目的列表可能会带来更好的用户体验。