javascript - 如何按照选中的顺序获取复选框的值？

Question

希望你能帮助我:)我有以下代码来获取复选框的值:

 function check() {
     var Input = Array.prototype.slice.call(document.querySelectorAll(".checkboxes:checked")).map(function(el) {
         return el.value;

     }).join(',')

     document.getElementById('output2').innerHTML = Input;
     return false;
 }

我希望输出按照我选择复选框的顺序排列。有没有办法让它们按正确的顺序排列？

Answer 1

当它们发生更改时，您可以为它们设置时间戳(内联注释)

var allCheckboxes = document.querySelectorAll("input[type='checkbox'][data-name]");

//bind the event to set time value on change
[...allCheckboxes].forEach(s => s.addEventListener("change", function(e) {
  e.currentTarget.timeval = new Date().getTime();
}));

document.querySelector("button").addEventListener("click", check);

function check() {
  var output = [...allCheckboxes] 
    .filter(s => s.checked) // filter out non-checked
    .sort((a, b) => a.timeval - b.timeval) //sort by timeval
    .map(s => s.getAttribute("data-name")).join(","); //fetch only data-name for display

  document.getElementById('output').innerHTML = output;
}

Check 1 <input type="checkbox" data-name="check1"> <br/> Check 2 <input type="checkbox" data-name="check2"> <br/> Check 3 <input type="checkbox" data-name="check3"> <br/> Check 4 <input type="checkbox" data-name="check4"> <br/> Check 5 <input type="checkbox"
  data-name="check5"> <br/>

<button>check</button>

<div id="output"></div>