javascript - finding the order of which checkboxes have been checked - Stack Overflow

admin管理员组

文章数量:1312878

I'm trying to get the order of which checkboxes have been checked.

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

I came up with this but i'm unable to get the order of when the checkboxes were checked. I'm only able to get the list of which ones are checked only.

$(":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;
            }
        }
    });
});

How would I get the data of what order they were checked? for instance "Checkboxes 1, 6, 3 ,2 were checked in this order"

I'm trying to get the order of which checkboxes have been checked.

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

I came up with this but i'm unable to get the order of when the checkboxes were checked. I'm only able to get the list of which ones are checked only.

$(":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;
            }
        }
    });
});

How would I get the data of what order they were checked? for instance "Checkboxes 1, 6, 3 ,2 were checked in this order"

• javascript
• jquery
• html
• dom
• checkbox

Share Improve this question Follow edited Mar 25, 2016 at 22:28 Daniel Plas Rivera asked Mar 25, 2016 at 22:23 Daniel Plas RiveraDaniel Plas Rivera 40044 silver badges2121 bronze badges 2

• if a checkbox is checked, then unchecked, then checked again would you want the duplicate in the list? i.e 1,2,5,3,5 – user2950720 Commented Mar 25, 2016 at 22:32
• @user2950720 yes, no duplications. My apologies on not listing that. if it's unchecked it shouldn't be in the list – Daniel Plas Rivera Commented Mar 25, 2016 at 22:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You'll have keep track of what checkboxes are checked, for instance in an array

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./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>

---

To get the index of each checkbox, or more accurately the parent LI, you could just map them

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

FIDDLE

You can do it in pure JavaScript too:

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>

In the above code, for each checkbox we invoke function, which on it's change will:

• get index of our input's li in it's parent,
• either
  • add it at the end of an array on check, or
  • remove appropriate element of an array on uncheck, and
• present an array (for demonstration purposes).

You would need to bind to the checkboxes being clicked, and push to an array some information corresponding to the checkboxes, then search through the array, their position would be the order in which they were checked.

本文标签： javascriptfinding the order of which checkboxes have been checkedStack Overflow