Jquery: Ajout d'un Formulaire de Saisie de la Valeur de (.val)

Je suis en train d'essayer d'écrire une chaîne de plusieurs valeurs selon si les cases sont cochées. c'est à dire

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

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

Le retour, je suis à la recherche d', dans ce cas, serait '1 2', mais seule la deuxième valeur est écrite dans le champ de saisie.

Les alertes de me dire que ces deux événements de l'argument sont à tirer. Est-il une autre méthode pour l'ajout de valeurs?

InformationsquelleAutor pac | 2011-06-14
  1. 3

    La .val() n'ajoute pas.. il définit la valeur de ce que vous transmettez, et écrase la valeur précédente.

    $('#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 {}

});

    Et si vous avez plusieurs cases à cocher que vous souhaitez tout de leurs valeurs ajoutées à la myInput élément si elles sont vérifiées, vous pouvez ajouter une classe à eux tous, et il suffit de faire

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

    démo http://jsfiddle.net/SQcGq/

    • l'amour au second! merci!!!!
    • un plaisir de vous aider 🙂
    InformationsquelleAutor Gabriele Petrioli
  2. 1

    Vous êtes en remplaçant la valeur de MyInput à chaque fois. .val ne pas ajouter à la valeur du champ de saisie, il remplace.

    var value = [];

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

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

$("#MyInput").val(value.join(' '));
    InformationsquelleAutor brymck
  3. 1

    Donner les cases d'une classe comme boxes, et l'utilisation de la map()[docs] méthode pour obtenir une collection de valeurs, la get()[docs] méthode pour convertir un Tableau, et .join() à se joindre à eux dans une chaîne.

    Puis définissez la chaîne résultante une fois que la valeur à l'aide de la val()[docs] méthode.

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

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

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

});

    EDIT: L'exigence était d'utiliser une chaîne égale à l'ID du résultat. Fixe. Grâce à @Bryan pour le heads up.

    • +1 j'aime bien cette solution. La seule chose que je changerais, c'est que je pense qu'il est l'aide de l'Id d'ici, de sorte que vous pourriez faire return this.id à la place. Coupant les cheveux en quatre, si.
    • Bon appel. la mise à jour.
    InformationsquelleAutor user113716
  4. 1

    Je suppose que c'est une faute de frappe? Dans la première if vous cochez la case "vérifié" valeur, dans la deuxième if vous recherchez le "vérifié" attribut

    Dans le cas où vous utilisez jQuery 1.6+ vous devez utiliser $('#box1').prop("checked")

    Vérifier/modifier cette démo: 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(" "));

    });

    • merci pour la capture de que. erreur de frappe est la seule question. édité.
    • nice ne le savais pas, il y a un .prop option ! merci +1
    • a la prop() fixer ou encore un problème?
    InformationsquelleAutor roberkules
  5. 0

    Faire $('#MyInput').val('box1 '); remplace la valeur de la zone de texte, qui est pourquoi vous êtes seul à voir la deuxième valeur, cela devrait fonctionner:

    $('#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 {}

});
    • fonctionne très bien merci! mais Gaby anticipé mon besoin de plusieurs cases à cocher ci-dessous.
    InformationsquelleAutor Ant