आशा है कि आप मेरी मदद कर सकते हैं :) मेरे पास चेकबॉक्स का मान प्राप्त करने के लिए यह कोड है:

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

मैं चाहता हूं कि आउटपुट उसी क्रम में हो जिस क्रम में मैंने चेकबॉक्स का चयन किया था। क्या उन्हें सही क्रम में लाने का कोई तरीका है?

0
Linda 4 अप्रैल 2018, 15:33

3 जवाब

सबसे बढ़िया उत्तर

जब वे बदले जाते हैं तो आप उनके लिए टाइमस्टैम्प सेट कर सकते हैं (टिप्पणियां इनलाइन)

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>
2
gurvinder372 4 अप्रैल 2018, 12:45

आप प्रत्येक अनुभाग में डेटा-आईडी विशेषता जोड़ सकते हैं। और जब आप एक चेकबॉक्स पर क्लिक करते हैं, तो प्रत्येक चेकबॉक्स के विशेषता मानों को एक सीरियल नंबर में बदल दें। ऐसा करने के लिए, jquery . का उपयोग करना आसान है

0
Nikita Grishchenkov 4 अप्रैल 2018, 12:40

आप एक 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>
0
Nina Scholz 4 अप्रैल 2018, 13:33