Jquery: fügen Sie ein Formular-Input-Wert (.val)

Ich versuche zu schreiben versucht, einen string, der mehrere Werte, je nachdem, ob bestimmte Kontrollkästchen aktiviert sind. also

$('#submit').click(function() {
  if ($('#box1').attr('checked')) {
    $('#MyInput').val('box1 ');
    alert('1');
  }

  if ($('#box2').attr('checked')) {
    $('#MyInput').val('box2 ');
    alert('2');
  }
});

Die Rückkehr freue ich mich in diesem Fall wäre '1 2', jedoch nur der zweite Wert geschrieben wird, in das Eingabefeld ein.

Die Warnungen die mir sagen, dass beide Ereignisse in das argument-Fässer. Gibt es eine andere Methode zum Anhängen Werte?

mögliche Duplikate von Ist es möglich, zu tun ".Wert +=" in JQuery?

InformationsquelleAutor pac | 2011-06-14

  1. 3

    Den .val() nicht Anhängen.. es legt den Wert auf das, was Sie übergeben, und überschreibt dabei den vorherigen Wert.

    $('#submit').click(function() {

var myInput = $('#MyInput').val('')[0];


if($('#box1').attr('checked')){
    myInput.value += 'box1 ';
    alert('1');
    }

if($('#box2').attr('checked')){
     myInput.value += 'box2 ';
    alert('2');
    }

else {}

});

    Und wenn Sie mehrere Kontrollkästchen, die Sie wollen alle Ihre Werte Hinzugefügt, um die myInput element, wenn Sie aktiviert sind, können Sie eine Klasse hinzufügen, um alle von Ihnen und mache nur

    $('#submit').click(function() {
  var myInput = $('#MyInput').val('')[0];
  $('.common-class-to-all:checked').each(function(){
     myInput.value += this.value + ' ';
  });
});

    demo http://jsfiddle.net/SQcGq/

    Liebe den zweiten! danke!!!
    gerne helfen 🙂

    InformationsquelleAutor Gabriele Petrioli

  2. 1

    Sind Sie und ersetzen Sie den Wert von MyInput jeder Zeit. .val Sie jedoch nicht auf den Wert des input-Feldes, es ersetzt es.

    var value = [];

if ($('#box1').prop('checked')) {
  value.push('box1');
}

if ($('#box2').prop('checked')) {
  value.push('box2');
}

$("#MyInput").val(value.join(' '));

    InformationsquelleAutor brymck

  3. 1

    Geben die Boxen eine Klasse wie boxes, und verwenden Sie die map()[docs] - Methode erhalten Sie eine Sammlung der Werte, die get()[docs] Methode zum konvertieren es in ein Array, und .join() auf, sich Ihnen anzuschließen in einen string.

    Legen Sie dann den resultierenden string-einmal als Wert mit der val()[docs] Methode.

    $('#submit').click(function() {

    var values = $('.boxes').map(function() {
        return this.checked ? this.id : '';
    }).get().join(' ');

    $('#MyInput').val( values );

});

    EDIT: wurde Die Voraussetzung für die Verwendung eines string entspricht der ID für das Ergebnis. Behoben. Dank @Bryan für das heads-up.

    +1 ich mag diese Lösung. Das einzige, was ich ändern würde ist, dass ich denke, dass er mit den IDs hier, so dass Sie könnte return this.id statt. Erbsenzählerei, aber.
    Gute call. die Aktualisierung.

    InformationsquelleAutor user113716

  4. 1

    Ich nehme an, es ist ein Tippfehler? In der ersten if Sie auf das Kontrollkästchen "geprüft" Wert, in der zweiten if Sie überprüfen Sie die "aktiviert" Attribut

    Im Falle der Verwendung von jQuery 1.6+, die Sie verwenden sollten $('#box1').prop("checked")

    Prüfen/ändern diese demo: http://jsfiddle.net/roberkules/45WgD/

    $('#submit').click(function() {

    var values = [];
    $("#box1, #box2").filter(":checked").each(function(i, box){
        values.push($(box).attr("id"));
    });

    $('#MyInput').val(values.join(" "));

    });

    danke für den Fang. Tippfehler wurde in der Frage nur. bearbeitet.
    schöne nicht erkennen, es ist ein .prop-option ! Dank +1
    habe die Stütze() zu beheben oder noch ein Problem?

    InformationsquelleAutor roberkules

  5. 0

    Tun $('#MyInput').val('box1 '); überschreibt den Wert der textbox, die ist, warum Sie sehen nur den zweiten Wert, dieser sollte funktionieren:

    $('#submit').click(function() {

  var new_val = '';

  if($('#box1').is(':checked')){
    new_val += 'box1 ';
  }

  if($('#box2').is(':checked')){
    new_val += 'box2 ';
  }

  $('#MyInput').val(new_val);

else {}

});
    funktioniert Super danke! aber Gaby erwartet meine Notwendigkeit für mehrere Kontrollkästchen unterhalb.

    InformationsquelleAutor Ant

Schreibe einen Kommentar