Jquery: добавление входного значения формы (.val)

Question

Я пытаюсь написать строку из нескольких значений в зависимости от того, установлены ли определенные флажки. т.е.

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

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

Возвращаемое значение в этом случае будет равно «1 2», однако в поле ввода будет записано только второе значение.

Предупреждения говорят мне, что оба события в аргументе запускаются. Есть ли другой метод для добавления значений?

Answer 1

.val() не добавляется .. оно задает значение, которое вы передаете, перезаписывая предыдущее значение.

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

});

---

И если у вас есть несколько флажков, которые вы хотите, чтобы все их значения добавлялись в элемент myInput, если они отмечены, вы можете добавить класс ко всем из них и просто сделать

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

демо http://jsfiddle.net/SQcGq/

Answer 2

Дайте блокам класс, подобный boxes, и используйте метод map() ^{[документы]} , чтобы получить коллекцию значений,get() ^{[документы]} метод преобразования его в массив и .join() для объединения их в строку.

Затемустановите полученную строку один раз как значение, используя метод val() ^{[документы]} .

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

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

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

});

---

EDIT: Требовалось использовать строку, равную идентификатору для результата.Исправлена.Спасибо @ Брайану за заголовки.

Answer 3

Вы заменяете значение MyInput каждый раз..val не добавляет к значению поля ввода, оно заменяет его.

var value = [];

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

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

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

Answer 4

Полагаю, это опечатка?В первом if вы проверяете проверенное значение , во втором if вы проверяете проверенный атрибут

В случае использованияjQuery 1.6+ вы должны использовать $('#box1').prop("checked")

Проверьте / измените это демо: 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(" "));

});

Answer 5

Выполнение $('#MyInput').val('box1 '); перезаписывает значение текстового поля, поэтому вы видите только второе значение, это должно работать:

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

});