Der Versuch, nur eindeutige Werte zu meinem Array hinzuzufügen und "inArray" ist nicht definiert?

Question

Ich versuche, ein Array (rulesArray) mit den Labels zu füllen, die mit aktivierten Checkboxen verknüpft sind. Ich versuche auch sicher zu sein, dass ich nur eindeutige Werte hinzufüge (das ist, wo die !inArray hereinkommt). Ich bin mir ziemlich sicher, dass dies an dieser Stelle eine falsche Syntax für inArray ist.

Derzeit mein Fehler ist "Uncaught ReferenceError: inArray is not defined."

Hier meine JS ist

$(document).ready(function(){ 
    var rulesArray = []; 
    $('input:checkbox').click(function(){ 
     $('input.selectBox').each(function(){ 
      if(($(this).is(':checked')) && (!inArray($(this).parent().text(), rulesArray))){ 
       rulesArray.push($(this).parent().text()); 
      } 
     }); 
     console.log(rulesArray); 
    }); 
}); 

Hier ist mein HTML

<div> 
    <button class="toggle_button" data-contents=".item_8"></button> 
    <ul class="contents item_8"> 
     <li><input class="selectBox" type="checkbox" id="color_1" name="color_1" value=""><label for="color_1">Red</label></li> 
     <li><input class="selectBox" type="checkbox" id="color_2" name="color_2" value=""><label for="color_2">Orange</label></li> 
     <li><input class="selectBox" type="checkbox" id="color_3" name="color_3" value=""><label for="color_3">Yellow</label></li> 
     <li><input class="selectBox" type="checkbox" id="color_4" name="color_4" value=""><label for="color_4">Green</label></li> 
     <li><input class="selectBox" type="checkbox" id="color_5" name="color_5" value=""><label for="color_5">Blue</label></li> 
    </ul> 
</div> 

Answer 1

Die richtige Methode ist $.inArray - nicht inArray - Sie können Ihren Code tho verkürzen mit einem besseren Selektor und mit einem Vanille indexOf Anruf:

$('input.selectBox').each(function(){ 
    var isChecked = this.checked; 
    var txt = $(this).parent().text(); 
    var idx = rulesArray.indexOf(txt); 

    if (isChecked && idx === -1) { 
     rulesArray.push(txt); 
    } else if (!isChecked && idx > -1) { 
     rulesArray.splice(idx, 1); 
    } 
}); 

und eine Lösung es $.map

var rulesArray = $('input.selectBox:checked').map(function() { 
    return $(this).parent().text(); 
}).get();