Question

I am trying trying to write a string of multiple values depending on whether specific checkboxes are checked. i.e.

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

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

The return I am looking for in this case would be ‘1 2’, however only the second value is written in the input field.

The alerts tell me that both events in the argument are firing. Is there another method for appending values?

Answer 1

The .val() does not append.. it sets the value to whatever you pass, overwriting the previous value.

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

});

---

And if you have multiple checkboxes that you want all of their values added to the myInput element if they are checked you can add a class to all of them and just do

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

demo http://jsfiddle.net/SQcGq/