javascript 如何通过先选择获得复选框顺序

8tntrjer  于 2024-01-05  发布在  Java
关注(0)|答案(6)|浏览(104)

我试图在一个数组中选中复选框,但我希望它们以被选中的顺序排列。
例如,我有三个复选框-

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

lskq00tm

lskq00tm1#

使用jQuery on()方法在复选框的状态更改时捕获JavaScript change事件。如果更改事件返回“选中”状态,则使用push()方法将复选框值添加到list数组。否则(请参见else块)使用grep()方法删除复选框的复选框值,这些复选框在更改时未被选中。

var list = new Array(); // a place to store the selection order

$('input').on("change", function(e) {
  let boxval = $(this).val();
  if ($(this).is(':checked')) {
    list.push(boxval);
  } 
  else {
    list = $.grep(list, function(item) {
     return boxval !== item;
    });
  }

  console.log(list);
})

个字符
为了更好的衡量,这里有一个vanilla JavaScript版本,它...
.使用querySelectorAll()来收集目标复选框,然后forEach()对集合进行重新排序,以便为每个复选框添加change事件侦听器。
当复选框change事件发生时,复选框的选中状态为true,对应的复选框值为push() 'ed到list数组。
或者,(再次参见else块)Array方法filter用于从list数组中删除未选中的框值。

var list = []; // a place to store the selection order

document.querySelectorAll('input[name="mycheck"]').forEach(function (box) {
  box.addEventListener("change", function (evt) {
    let boxval = evt.target.value;
    if ( true === box.checked ) {
      list.push(boxval);
    }
    else {
      list = list.filter(function(val) {
        return boxval !== val;
      });
    }

    console.log(list);
  });
});
<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">

的字符串

nwnhqdif

nwnhqdif2#

为每个复选框添加了类.chx,因为这是访问一组标记的最简单方法--我想不出你为什么不这样做的理由。基本上,你需要使用一个事件处理程序来拾取从用户与复选框交互中派生的值。

示例中有详细注解

// Define an empty array
let checks = [];

// Bind each checkbox to the change event
$('.chx').on('change', function() {
  // If the changed checkbox is checked
  if (this.checked) {
    // Add the checkbox's value to the array
    checks.push(+$(this).val());
  } else {
    // Otherwise add a negative value of the checkbox to the array
    checks.push(-$(this).val());
  }
  console.log(checks);
});
/* Added the negative numbers because there's two states a checkbox is in
and if it's important to know the order of what was checked then it's 
probably important to know what state each one is in as well.
*/

个字符

z9smfwbn

z9smfwbn3#

你可以用这种方式

var list = new Array();
    $('input').on("click", function (e) {
        if ($(this).is(':checked')) {
            list.push([$(this).val()]);
        }
        console.log(list);

    })

个字符
我希望这将是工作:)

b09cbbtk

b09cbbtk4#

  • 此答案假设值是唯一的。*

选中时,将值推送到数组中。未选中时,将其从数组中删除。

const selections = [];
$('[name="mycheck[]"]').on('change', function (){
  // if checked, add it to the array
  if (this.checked) {
    selections.push(this.value);
  } else {
    // if not checked, remove the value from the array
    const index = selections.indexOf(this.value);
    if (index > -1) selections.splice(index, 1);
  }
  console.log(selections);
});

个字符

68de4m5k

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)当循环选中的复选框以便递减具有大于目标索引的索引的所有复选框时。

// collect and loop inputs with name starting with "mycheck["
document.querySelectorAll('input[name^="mycheck["]').forEach(function (cbox_change) {

  // add a change event listener to each checkbox
  cbox_change.addEventListener("change", function ({target: cbox_order}) {

    // determine the next available index
    let idx_add = document.querySelectorAll('input[name^="mycheck["]:checked').length - 1;
  
    // if changed checkbox check state is true (checked)
    if ( cbox_order.checked ) {
      // add next index to name attribute
      cbox_order.name = "mycheck[" + (idx_add) + "]";
    }
    
    // if changed checkbox check state is false (unchecked)
    else {
      // get target index already assigned when changed to true
      let idx_remove = parseInt(cbox_order.name.match(/^mycheck\[([0-9]+)\]$/)[1]);
      // remove index from name
      cbox_order.name = "mycheck[]";
      // loop all checked checkboxes to update indexes greater than target index
      document.querySelectorAll('input[name^="mycheck["]:checked').forEach(function (cbox_update) {
        // capture index to update
        let idx_update = parseInt(cbox_update.name.match(/^mycheck\[([0-9]+)\]$/)[1]);
        // if greater than target index, reduce by one
        if (idx_remove < idx_update) {
          cbox_update.name = "mycheck[" + (idx_update - 1) + "]";
        }
      });
    }

    // show name of all "mycheck" checkboxes
    document.querySelectorAll('input[name^="mycheck["]').forEach(function (cbox) {
      console.log(cbox.name);
    });
  });
});

个字符
如果您在服务器上使用PHP来访问此数组,只需:

<?php

// get checked order array
$mycheck = $_POST['mycheck'];
// sort by key
ksort($mycheck);

?>


如果你需要在浏览器中使用订单数组,在表单上传之前:

let check_order = Array.from(document.querySelectorAll('input[name^="mycheck["]:checked'))
  .sort(function (aa, bb) {
    return aa.name.match(/^mycheck\[([0-9]+)\]$/)[1] - bb.name.match(/^mycheck\[([0-9]+)\]$/)[1];
  })
  .map(function (item) {
    return parseInt(item.value);
  })
;

console.log(check_order);
<label for="check-1">check 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck[2]" checked>

<label for="check-2">check 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck[0]" checked>

<label for="check-3">check 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck[1]" checked>
kt06eoxx

kt06eoxx6#

一般来说,要小心 * 状态 *:用户交互只是改变状态的一种方式,而且通常有比你想象的更多的交互方式。
经常被忽视的是状态是通过编程方式设置的,例如通过“checkall”复选框和键盘交互。
因此,一般来说,监听change比监听click更好,并且在创建最终列表时使用实际状态。
此外,您还需要考虑到用户可以取消选中并再次选中。
这里的方法是跟踪每个复选框被选中的顺序,然后最后根据它们在这种日志中的位置对实际选中的复选框进行排序。

const checkedLog = [];

$('input[type="checkbox"]').on("change", function(e) {
  if (this.checked) {
    checkedLog.push(this.value);
  }
  // only track order in which they were checked, not unchecked
});

$('button').on('click', function() {
  // get all actually checked values
  const vals = [];
  $('input:checked').each(function() {
    vals.push(this.value);
  })

  // sort actually checked values by last log entry
  const reverseLog = 
  vals.sort((a, b) => checkedLog.lastIndexOf(a) - checkedLog.lastIndexOf(b));
  console.log(vals);
});

个字符
这是使用Array’s sort method和使用检查事件的日志来比较哪个复选框应该先出现。
使用lastIndexOf是因为复选框最后一次被选中的时间计数。
您还可以在复选框未被选中时将其从日志中删除,然后lastIndex()就足够了。
如果有一个复选框没有触发change事件,则lastIndexOf()将返回-1,并且该值将位于列表中的第一个。

相关问题