Get dynamischen Wert von Checkbox jQuery

Question

Ich brauche Hilfe mit Wert von Checkbox mit jQuery erhalten.

$(document).ready(function() { 
 
    var value_array = []; 
 

 
    $(document).on('change', '.radio-group input', function(e) { 
 
    var $this = $(this), 
 
     value = $this.val(); 
 

 
    value_array.push(value); 
 
    console.log($.unique(value_array)); 
 

 
    $('#out').html($.unique(value_array).join()) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio-group"> 
 
    <label> 
 
     <input type="checkbox" name="cat_1" value="90" /> 
 
     Category 1 
 
    </label> 
 

 
    <label> 
 
     <input type="checkbox" name="cat_2" value="43" /> 
 
     Category 2 
 
    </label> 
 
</div> 
 

 
<div id="out"> 
 
</div>

1. Wenn Kategorie 1 geprüft, Wert bekommen (richtig).
2. Wenn Kategorie 2 überprüft, erhalten Wert (richtig).
3. Wenn Kategorie 1 nicht überprüft, erhalten Wert wieder (falsch, ich will nicht es).
4. Wenn Kategorie 2 nicht überprüft, erhalten Wert wieder (falsch, ich will nicht es).

Ich möchte wie folgt aus:

5. Wenn Kategorie 1 un-geprüft, um den Wert von Ausgabe-Array entfernen.

6. Wenn Kategorie 2 nicht markiert ist, entfernen Sie den Wert aus dem Ausgabe-Array.

Answer 1

Sie müssen mit nicht ein Array zu deklarieren zu beginnen (die Ihren Namensraum ohnehin verschmutzen). Sie können einfach für alle Kontrollkästchen auszuwählen, verwenden .filter() diejenigen zu halten, die überprüft werden, und die Verwendung .map() ihre Werte zurück, die alle innerhalb der Rückruf des onchange Ereignis-Listener getan:

// Get values of checked checkboxes 
var value_array = $('.radio-group input').filter(':checked').map(function() { 
    return this.value; 
}).get(); 

console.log(value_array); 

Hinweis: Denken Sie daran, Kette .get() am Ende von .map(), weil es ein jQuery-Objekt/eine Sammlung zurückgibt und Sie es in ein Array konvertieren müssen.

Siehe Proof-of-Concept-Beispiel unten:

$(document).ready(function() { 
 

 
    $(document).on('change', '.radio-group input', function(e) { 
 
    var $this = $(this), 
 
     value = $this.val(); 
 

 
    // Get values of checked checkboxes 
 
    var value_array = $('.radio-group input').filter(':checked').map(function() { 
 
     return this.value; 
 
    }).get(); 
 

 
    console.log(value_array); 
 

 
    $('#out').html(value_array.join()) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio-group"> 
 
    <label> 
 
     <input type="checkbox" name="cat_1" value="90" /> 
 
     Category 1 
 
    </label> 
 

 
    <label> 
 
     <input type="checkbox" name="cat_2" value="43" /> 
 
     Category 2 
 
    </label> 
 
</div> 
 

 
<div id="out"> 
 
</div>

Answer 2

Sie können nur ein Array aller geprüften Werte auf einmal holen:

$(document).ready(function() { 
    var value_array = []; 

    $(document).on('change', '.radio-group input', function(e) { 
    value_array = $('.radio-group input:checked').map(function() { 
       return $(this).val(); 
       }).get(); 

    console.log($.unique(value_array)); 
    $('#out').html($.unique(value_array).join()) 
    }); 
}); 

JSFiddle

Answer 3

Überprüfen Sie, ob Kontrollkästchen aktiviert ist, einen Mehrwert in ein Array, wenn es ist, zu entfernen, wenn es nicht ist .

$(document).ready(function() { 
 
    var value_array = []; 
 

 
    $(document).on('change', '.radio-group input', function(e) { 
 
    var $this = $(this), 
 
     value = $this.val(); 
 

 
    if ($this.prop('checked')) value_array.push(value); 
 
    else value_array.splice(value_array.indexOf(value), 1); 
 
    console.log($.unique(value_array)); 
 

 
    $('#out').html($.unique(value_array).join()) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio-group"> 
 
    <label> 
 
     <input type="checkbox" name="cat_1" value="90" /> 
 
     Category 1 
 
    </label> 
 

 
    <label> 
 
     <input type="checkbox" name="cat_2" value="43" /> 
 
     Category 2 
 
    </label> 
 
</div> 
 

 
<div id="out"> 
 
</div>

Answer 4

Zunächst sollten Sie verstehen, dass der "this" Wert verweist auf das Objekt, das den Code besitzt. In Ihrem Fall der „this“ in

 $(document).on('change', '.radio-group input', function(e) 

zum „Dokument“ bezieht sich selbst und nicht den „.radio-Gruppe Eingang“. Stattdessen sollten Sie Folgendes tun, damit sich das "Dies" auf Ihr Kontrollkästchen bezieht.

var arr = []; 
    $(".radio-group input").change(function(){ 

    var val = $(this).val(); 

    //push the value into the array if the checkbox is checked 
    if($(this).prop("checked")==true) 
    { 
     arr.push(val); 

    } 

    //otherwise, remove the value from the array 
    else{ 
    //fetch the index of the value in the array 
    var index = arr.indexOf(val); 

    //remove that value from the index 
    arr.splice(index,1); 
} 

});