Hinzufügen/Entfernen von Werten aus Checkbox-Werten in Javascript

Question

Ich habe zwei Felder: eins ist ein Kontrollkästchen (mit Scala gebaut), ist eins ein Eingabe/Textfeld. Ich versuche, Werte aus dem Kontrollkästchen zum Eingabefeld hinzuzufügen und zu entfernen. Ich versuche, mehrere Werte zu nehmen und mit einem Komma zusammen zu stringeln.

Hier meine HTML Felder sind:

<div class="column column1"> 
    @for(service <- servicesList) { 
     <label><input type="checkbox" name="selectServices" value=@service.name><span>@service.name</span></label> 
    } 
</div> 

<input name="services" id="services"> 

ich jQuery in einem Tag bin mit zu versuchen, das onchange Ereignis aufzuzeichnen:

$(document).ready(function(){ 

    var $services = $('#services'); 
    var $selectServices = $('#selectServices'); 

    $selectServices.change(function(){ 
     for (var i = 0, n = this.length; i < n; i++) { 
      if (this[i].checked) { 
       $services.val($services.val() + this[i].value); 
      } 
      else { 
       $services.val($services.val().replace(this[i].value, "")); 
      } 
     } 

    }); 
}); 

Allerdings scheint es, dass dies nicht "Feuer" wenn Sie das Kontrollkästchen aktivieren und deaktivieren. Ich erhalte keine Fehler oder Nachrichten, also vermute ich, dass es nicht funktioniert oder der Code falsch ist.

Ich schätze die Hilfe!

Answer 1

dieses Beispiel, Sie müssen nicht die ganze Zeit suchen und zu ersetzen, setzen Sie einfach einen neuen Wert:

$(function() { 
 
    $('input[name=selectServices]').on('change', function() { 
 
    $('#services').val($('input[name=selectServices]:checked').map(function() { 
 
     return this.value; 
 
    }).get()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column column1"> 
 
    <label> 
 
    <input type="checkbox" name="selectServices" value='1'><span>1</span> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" name="selectServices" value='2'><span>2</span> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" name="selectServices" value='3'><span>3</span> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" name="selectServices" value='4'><span>4</span> 
 
    </label> 
 
</div> 
 
<input name="services" id="services">

geht die $ (function() {} in das $ (Dokument) .ready (Funktion() {}?

Nein, es ist kurz oder gleichwertig für das gleiche.

Answer 2

$('#selectServices') wählt nach ID, es gibt keine Elemente mit dieser ID. IDs müssen eindeutig sein, sodass Sie sie in diesem Fall nicht verwenden können. Ich würde auch nicht empfehlen, Namen zu verwenden, da Eingabeelemente eindeutige Namen haben sollten. Sie können class verwenden:

<label><input type="checkbox" class="selectServices" ... 

Dann .selectServices in jQuery verwenden. Und:

var $selectServices = $('.selectServices'); 
$selectServices.change(function(){ 
    if (this.checked) { 
     $services.val($services.val() + this.value); 
    } else { 
     $services.val($services.val().replace(this.value, "")); 
    } 
}); 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.