So ersetzen Sie Eingabewerte durch neue Werte entsprechend in jquery

Question

möchte nur fragen, wie kann ich eine Standardwerte entsprechend der Anzahl der verfügbaren Kontrollkästchen festlegen. Zum Beispiel habe ich 3 Checkboxen und ich möchte eine Standardwerte von 0,0,0 haben, da ich 3 Kontrollkästchen habe. Und wenn der Benutzer das erste Kontrollkästchen anklickt, wird der erste durch ersetzt, da der Wert des ersten Kontrollkästchens einen Wert von und das gleiche wie die restlichen Kontrollkästchen hat. Und wenn der Benutzer das erste Kontrollkästchen deaktiviert, wird es auf seinen Standardwert zurückgesetzt, der ist. Ich habe mein Snippet eingebettet. Danke Jungs im Voraus. .

$('input#category').on('change', function() { 
 
     var selectedCategories = $('.category:checkbox:checked').map(function() { 
 
      return this.value; 
 
     }).get(); 
 
     $('#post_category').val(selectedCategories); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" value="1" id="category" name="category" class="category category_1">Category 1 
 
<input type="checkbox" value="2" id="category" name="category" class="category category_2">Category 2 
 
<input type="checkbox" value="3" id="category" name="category" class="category category_3">Category 3 
 
<br /> 
 
<h5>Result:</h5> 
 
<input type="text" id="post_category">

Answer 1

Du schon, es zu tun, überprüfen nur, wenn die Felder in der Abbildung

var elems = $('.category[type="checkbox"]').on('change', function() { 
 
    var selectedCategories = elems.map(function() { 
 
     return this.checked ? +this.value : 0; 
 
    }).get(); 
 

 
    $('#post_category').val(selectedCategories); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" value="1" id="category1" name="category" class="category category_1">Category 1 
 
<input type="checkbox" value="2" id="category2" name="category" class="category category_2">Category 2 
 
<input type="checkbox" value="3" id="category3" name="category" class="category category_3">Category 3 
 
<br /> 
 
<h5>Result:</h5> 
 
<input type="text" id="post_category">

Hinweis die Auswahländerung geprüft werden. Sie können für alle drei Eingänge den gleichen Klassennamen haben, aber sie können nicht haben die gleiche ID, wie IDs eindeutig sind

Answer 2

$ ('# post_category') leer();

$ ('# post_category'). Val (ausgewählteKategorien);

Answer 3

Überprüfen Sie, ob Sie in Ihrem Code mehrere Elemente mit den gleichen id und name Attribute haben und sollte eindeutig sein .

Auf der change Ereignishandler gibt es keine Notwendigkeit, eine Karte machen/iterieren alle geprüft Checkbox Eingänge, weil das geänderte Element Checkbox Eigenschaften haben value und checked:

var arr = [0, 0, 0], 
 
    setPostCategory = function() { 
 
     arr[this.value - 1] = (this.checked) ? this.value : 0; 
 
     $('#post_category').val(arr.join(', ')); 
 
    }; 
 

 
$('input.category').on('change', setPostCategory);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input type="checkbox" value="1" name="category1" class="category">Category 1 
 
<input type="checkbox" value="2" name="category2" class="category">Category 2 
 
<input type="checkbox" value="3" name="category3" class="category">Category 3 
 

 
<br> 
 

 
<h5>Result:</h5> 
 
<input type="text" id="post_category" value="0, 0, 0">