jQuery для заполнения полей формы с именем массива на основе первого введенного значения, где число полей неизвестно - PullRequest
Новая
       10

jQuery для заполнения полей формы с именем массива на основе первого введенного значения, где число полей неизвестно

1 голос
/ 13 апреля 2010

Привет,

У меня есть форма с переменным количеством входов, упрощенная версия которой выглядит так: 

<form>
<label for="same">all the same as first?</label>
<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>

Идея состоит в том, чтобы установить флажок #same и заставить jQuery скопировать значение из #foo [1] в #foo [2], #foo [3] и т. Д. Их также необходимо очистить, если #same не отмечено.

Может быть любое количество входов #foo, основанных на вводе с предыдущего этапа формы, и этот бит доставляет мне проблемы. Я уверен, что упускаю что-то очевидное, но я не могу заставить работать любой вариант $('#dest').val($('#source').val());.

Помощь!

Ответы [ 3 ]

3 голосов
/ 13 апреля 2010

jQuery не удастся выбрать по идентификатору $('#foo[1]'), так как он включает [ и ], поэтому я выбираю первый элемент как $('[id=foo[1]]'). Затем получить все последующие текстовые поля, затем отфильтровать их, если их атрибут id не соответствует foo[<digits>], а затем либо применить то же значение, что и первое, либо очистить их в зависимости от состояния флажка.

пример 

$("#same").click(function() {
    var first = $('[id=foo[1]]');
    var next = first.nextAll(':text').filter(function() {
        return /foo\[\d+\]/.test(this.id);
    });
    if($(this).is(':checked')) {
        next.val(first.val());
    }
    else {
        next.val('');
    }   
});​

Хотя это работает, может быть проще добавить классы, такие как first и rest, в HTML, что намного упростит задачу. 

<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" class="first" value="" />
<input type="text" id="foo[2]" name="foo[2]" class="rest" value="" />
<input type="text" id="foo[3]" name="foo[3]" class="rest" value="" />
<input type="text" id="foo[4]" name="foo[4]" class="rest" value="" />
<input type="text" id="foo[5]" name="foo[5]" class="rest" value="" />

Код jQuery упрощается до: 

$("#same").click(function() {
    if($(this).is(':checked')) {
        $('.rest').val($('.first').val());
    }
    else {
        $('.rest').val('');
    }   
});​
2 голосов
/ 13 апреля 2010

Может, как-то так?

http://jsbin.com/anone3/2/edit

2 голосов
/ 13 апреля 2010 
    $("input#same").click(function(){
      var checkBox = $(this);
       if (checkBox.attr("checked")){
         $("form input[name^=foo]").val($("input[name^=foo]:first").val());
        }else{
          $("form input[name^=foo]:not(:first)").val("");
        }
    });

EDIT: этот код будет применяться только к элементам ввода, имя которых начинается со строки foo Пример

...