如何按選擇的順序獲取復選框的值？

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來驗證單擊事件是否已選中，然后將其添加到列表/數組中。

希望這可以幫助 ：）

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

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

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>