ラベル値で要素をソートする方法（ネイティブJavaScriptを使用）？

Question

解決できない...ラベル値で要素を並べ替える方法（ネイティブJavaScriptを使用）？主な問題は、チェックボックスのいくつかをチェックする必要があることです。ここに私のHTMLの一部です：

<div class="checkboxesArea"> 
     <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" checked/> 
     <label for="checkboxG1" class="css-label radGroup1">OOCSS</label> 

     <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" /> 
     <label for="checkboxG2" class="css-label radGroup1">Pug(Jade)</label> 

     <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" /> 
     <label for="checkboxG3" class="css-label radGroup1">Stylus/LESS/SASS</label> 

    </div> 

Answer 1

私はそれを解決しました。ここでは、これまでに試してみました何のコード

function myFunction() { 
 

 
    var sort_by_name = function(a, b) { 
 
     a = a.textContent.toLowerCase(); 
 
     b = b.textContent.toLowerCase(); 
 
     if (a < b) { 
 
      return -1; 
 
     } else if (a > b) { 
 
      return 1; 
 
     } else { 
 
      // a must be equal to b 
 
      return 0; 
 
     } 
 
    } 
 

 

 
    var bigList = document.getElementById('checkboxesArea'); 
 

 

 
    var list = []; 
 
    list = document.getElementsByClassName("singleCheckbox"); 
 
    var arr = [].slice.call(list); 
 
    console.log(arr); 
 
    function sortTheHellOutOfIt() { 
 
     arr.sort(sort_by_name); 
 
    }; 
 
    sortTheHellOutOfIt(); 
 
    console.log(arr); 
 
    bigList.innerHTML = ""; 
 
    console.log(arr[1]); 
 
    function loop() { 
 
     for (i=0; i< arr.length; i++) { 
 
      bigList.append(arr[i]); 
 
     } 
 
    } 
 
    loop(); 
 
    /* bigList.html(arr); */ 
 

 

 
} 
 
myFunction();

input[type=checkbox].css-checkbox { 
 
    position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; 
 
} 
 

 
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr { 
 
    padding-left: 25px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    line-height: 40px; 
 
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0; 
 
    font-size: 18px; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    font-family: calibri; 
 
    font-weight: bold; 
 

 
} 
 

 
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk { 
 
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png); 
 
    background-position: 0 -30px; 
 
} 
 
label.css-label { 
 
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5b5bfbefda397e42988ac41ac712d977.png); 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

 <div id="checkboxesArea" class="checkboxesArea"> 
 

 
      <div class="singleCheckbox"> 
 
       <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" /> 
 
       <label for="checkboxG1" class="css-label radGroup1">БЭМ/OOCSS</label> 
 
      </div> 
 
      <div class="singleCheckbox"> 
 
       <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" /> 
 
       <label for="checkboxG2" class="css-label radGroup1">Pug(Jade)</label> 
 
      </div> 
 
      <div class="singleCheckbox"> 
 
       <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" /> 
 
       <label for="checkboxG3" class="css-label radGroup1">Stylus/LESS/SASS</label> 
 
      </div> 
 
    </div>