查找已选中复选框的顺序答案

【问题标题】：finding the order of which checkboxes have been checked查找已选中复选框的顺序
【发布时间】：2016-03-25 22:23:26
【问题描述】：

我正在尝试获取选中复选框的顺序。

<ul class="dropdown-content checkboxes">
  <li><label><input type="checkbox" />Billy</label></li>
  <li><label><input type="checkbox" />Jacob</label></li>
  <li><label><input type="checkbox" />Bob</label></li>
  <li><label><input type="checkbox" />Alexandren</label></li>
  <li><label><input type="checkbox" />Erren</label></li>
  <li><label><input type="checkbox" />Stewgart</label></li>
  <li><label><input type="checkbox" />Jillian</label></li>
  <li><label><input type="checkbox" />Other</label></li>
</ul>

我想出了这个，但我无法获得复选框被选中的顺序。我只能获取只检查了哪些列表。

$(":checkbox").click(function() {
    console.log($(":checked").length);
    var i = 0;
    checked = true;
    $(':checkbox').each(function() {
        if (this.checked == false) {
            i++;
            if (i === 8) {
                checked = false;
            }
        }
    });
});

我如何获得他们被检查的顺序的数据？例如“按此顺序检查复选框 1、6、3、2”

【问题讨论】：

如果选中一个复选框，然后取消选中，然后再次选中，您是否希望列表中出现重复项？即 1,2,5,3,5
@user2950720 是的，没有重复。我很抱歉没有列出。如果未选中，则不应在列表中

标签： javascript jquery html dom checkbox

【解决方案1】：

您将跟踪检查了哪些复选框，例如在数组中

var order = [];

$("[type=checkbox]").on('change', function() { // always use change event
    var idx = order.indexOf(this);
	
    if (idx !== -1) {         // if already in array
    	order.splice(idx, 1); // make sure we remove it
    }

    if (this.checked) {    // if checked
    	order.push(this);  // add to end of array
    }
    
    // <------------------------------------For demonstration
    $('#result').html(JSON.stringify($.map(order, function(elem) {
    	return $(elem).closest('label').text().trim();
    })));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-content checkboxes">
  <li><label><input type="checkbox" />Billy</label></li>
  <li><label><input type="checkbox" />Jacob</label></li>
  <li><label><input type="checkbox" />Bob</label></li>
  <li><label><input type="checkbox" />Alexandren</label></li>
  <li><label><input type="checkbox" />Erren</label></li>
  <li><label><input type="checkbox" />Stewgart</label></li>
  <li><label><input type="checkbox" />Jillian</label></li>
  <li><label><input type="checkbox" />Other</label></li>
</ul>
<div id="result"></div>

要获取每个复选框的索引，或者更准确地说是父 LI，您可以映射它们

var map = $.map(order, function(elem) {
    return $(elem).closest('li').index();
});

FIDDLE

【讨论】：

如果使用这种方法在表单中发布数据并使用PHP进行处理，您将如何获取相关复选框值的订单值？

【解决方案2】：

你也可以用纯 JavaScript 来做：

var result = document.getElementById('result');
var order = [];

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), function (checkbox) {
    'use strict';
    checkbox.addEventListener('change', function () {
        var previousLi = checkbox.parentNode.parentNode.previousElementSibling;
        var index = 0;
        while (previousLi !== null) {
            previousLi = previousLi.previousElementSibling;
            index += 1;
        }

        if (checkbox.checked) {
            order.push(index);
        } else {
            order.splice(order.indexOf(index), 1);
        }

        result.textContent = order;
    });
});

<ul class="dropdown-content checkboxes">
  <li><label><input type="checkbox"/>Billy</label></li>
  <li><label><input type="checkbox"/>Jacob</label></li>
  <li><label><input type="checkbox"/>Bob</label></li>
  <li><label><input type="checkbox"/>Alexandren</label></li>
  <li><label><input type="checkbox"/>Erren</label></li>
  <li><label><input type="checkbox"/>Stewgart</label></li>
  <li><label><input type="checkbox"/>Jillian</label></li>
  <li><label><input type="checkbox"/>Other</label></li>
</ul>
<p id="result"></p>

在上面的代码中，对于每个复选框，我们调用函数，它的变化将：

在其父级中获取我们input 的li 的索引，
要么
- 在检查时将其添加到数组的末尾，或者
- 取消选中时删除数组的适当元素，然后
呈现一个数组（用于演示目的）。

【讨论】：

【解决方案3】：

您需要绑定到被点击的复选框，并将与复选框对应的一些信息推送到数组中，然后在数组中搜索，它们的位置将是它们被选中的顺序。

【讨论】：