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>

Answer 2

您可以设置数组并保存选中的值。

您可以通过为每个chcekbox提供事件监听器来实现此目的。

在事件监听器中添加if以验证click事件是否在检查时，然后将它们添加到列表/数组中。

希望这会有所帮助：）

＆＃13;

var checks = document.querySelectorAll('input[type=checkbox]');
var order = [];

for(var i=0; i<checks.length;i++){
  checks[i].addEventListener("click", function(){
    if(this.checked)
      order.push(this.value);
  })
}

＆＃13;

<input type="checkbox" value="A">A
<input type="checkbox" value="B">B
<input type="checkbox" value="C">C
<input type="checkbox" value="D">D
<br>
<button onclick="console.log('Order: '+order)">Check order</button>

＆＃13;

Answer 3

您可以为每个部分添加data-id属性。当您单击一个复选框时，将每个复选框的属性值更改为序列号。为此，使用jquery

更容易

Answer 4

您可以使用Set并根据复选框的选中状态添加或删除。

Set以插入顺序返回项目。

var checks = document.querySelectorAll('input[type=checkbox]'),
    order = new Set,
    i

for (i = 0; i < checks.length; i++) {
    checks[i].addEventListener("click", function() {
        order[['delete', 'add'][+this.checked]](this.value);
    });
}

<input type="checkbox" value="A">A
<input type="checkbox" value="B">B
<input type="checkbox" value="C">C
<input type="checkbox" value="D">D
<br>
<button onclick="console.log('Order: '+[...order])">Check order</button>

如何按选择顺序获取复选框的值？

4 个答案: