我试图在一个数组中选中复选框,但我希望它们以被选中的顺序排列。
例如,我有三个复选框-
<label for="check-1">check 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck[]">
<label for="check-2">check 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck[]">
<label for="check-3">check 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck[]">
字符串
- 我选择了检查2然后检查3然后检查1。
我希望结果是这样的数组('2','3','1')
我使用这个功能,但它不是让他们订购
var list = new Array();
$('input[name="mycheck"]:checked').each(function() {
list.push([$(this).val()]);
});
console.log(list);
型
6条答案
按热度按时间lskq00tm1#
使用jQuery
on()
方法在复选框的状态更改时捕获JavaScriptchange
事件。如果更改事件返回“选中”状态,则使用push()
方法将复选框值添加到list
数组。否则(请参见else
块)使用grep()
方法删除复选框的复选框值,这些复选框在更改时未被选中。个字符
为了更好的衡量,这里有一个vanilla JavaScript版本,它...
.使用
querySelectorAll()
来收集目标复选框,然后forEach()
对集合进行重新排序,以便为每个复选框添加change
事件侦听器。当复选框
change
事件发生时,复选框的选中状态为true
,对应的复选框值为push()
'ed到list
数组。或者,(再次参见
else
块)Array方法filter
用于从list
数组中删除未选中的框值。的字符串
nwnhqdif2#
为每个复选框添加了类
.chx
,因为这是访问一组标记的最简单方法--我想不出你为什么不这样做的理由。基本上,你需要使用一个事件处理程序来拾取从用户与复选框交互中派生的值。示例中有详细注解
个字符
z9smfwbn3#
你可以用这种方式
个字符
我希望这将是工作:)
b09cbbtk4#
选中时,将值推送到数组中。未选中时,将其从数组中删除。
个字符
68de4m5k5#
如果您需要将订单数组数据发送到服务器,使用包含复选框的表单,下面是记录订单复选框被选中的另一种方法。
首先请注意,复选框名称已从
name="mycheck"
更改为name="mycheck[]"
,以利用服务器端数组创建/修改,例如PHP。有了这些
querySelectorAll()
和forEach()
来收集目标复选框,然后对该集合进行重命名,以便为每个复选框添加change
事件侦听器。change
事件处理程序用于捕获每个目标复选框的选中状态更改。选中状态更改后,使用querySelectorAll()
attribute selectors along with modifier^=
and pseudo-class:checked
对已选中状态复选框的数量进行计数。计数减少1以确定下一个可用的数组索引。如果checked状态更改为true,则下一个可用数组索引将添加到checkbox name属性。
如果选中状态更改为false,则捕获先前分配索引的目标复选框,更新复选框名称以删除索引,并更新其余选中复选框的索引以反映从选择顺序中删除一个复选框。仅需要更新索引大于目标索引的复选框。
match()
和regular expression在未选中状态的情况下(这意味着复选框先前被选中)被用来捕获先前分配的索引,用于:1)捕获目标复选框索引以确定哪些已经选中的复选框需要递减它们的索引,以及2)当循环选中的复选框以便递减具有大于目标索引的索引的所有复选框时。个字符
如果您在服务器上使用PHP来访问此数组,只需:
型
如果你需要在浏览器中使用订单数组,在表单上传之前:
kt06eoxx6#
一般来说,要小心 * 状态 *:用户交互只是改变状态的一种方式,而且通常有比你想象的更多的交互方式。
经常被忽视的是状态是通过编程方式设置的,例如通过“checkall”复选框和键盘交互。
因此,一般来说,监听
change
比监听click
更好,并且在创建最终列表时使用实际状态。此外,您还需要考虑到用户可以取消选中并再次选中。
这里的方法是跟踪每个复选框被选中的顺序,然后最后根据它们在这种日志中的位置对实际选中的复选框进行排序。
个字符
这是使用Array’s sort method和使用检查事件的日志来比较哪个复选框应该先出现。
使用
lastIndexOf
是因为复选框最后一次被选中的时间计数。您还可以在复选框未被选中时将其从日志中删除,然后
lastIndex()
就足够了。如果有一个复选框没有触发
change
事件,则lastIndexOf()
将返回-1,并且该值将位于列表中的第一个。