jQuery - переименование чекбоксов устанавливается последовательно

0

Я пытаюсь создать форму, позволяющую вводить несколько элементов (неизвестное число), а затем обрабатываться с помощью PHP. Формы должны быть сгруппированы в два столбца, и мой подход заключался в клонировании формы в верхней части столбца при щелчке пользователя.

Все это отлично работает, кроме обработки флажков! Их нужно сгруппировать в две группы и динамически перенумеровать на каждый новый клон. Желаемый результат:

При загрузке страницы:

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

На одном новом клоне

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<!-- This will be the new group, cloned from the above group -->
<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

<!-- Further clones may appear here -->

<input type="checkbox" name="UPDATE_METHOD[2][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[2][]" value="SMS" checked="">

<!-- ...or here -->

Я пытаюсь выяснить, как это сделать с помощью javascript/jQuery. Мой код до сих пор (с помощью @adeneo:

$(document).ready(function(){
            $(".clone_trigger_button").click(function () {

                // code to group checkboxes below
                $('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
                    return name.split('[').shift() + '['+(++i)+'][]';
                });


                $('.clone_replicate_this_div').first().clone().insertBefore(".placer");
                $('input.cl:last').val('');
                event.preventDefault();


            });
        });

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

Это последний бит, над которым я борюсь... Любые идеи были бы высоко оценены!

С большим спасибо...

  • 0
    Можно ли создать скрипку?
  • 0
    Я сделаю это сейчас!
Показать ещё 1 комментарий
Теги:
checkbox

2 ответа

1
Лучший ответ
var j = 0;

$('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
    if (i%2==0) j++;
    return name.split('[').shift() + '['+j+'][]';
});

FIDDLE

Поделиться
  • 0
    Большое спасибо за это @adeneo. Я не могу процитировать заставить его работать при интеграции в мой код, хотя. Вы могли бы взглянуть? jsfiddle.net/dalepotter/J88uS/1 Чувствую, что я так близок к созданию этой работы, но не совсем там!
  • 0
    @ user2761030 - Конечно, имя больше не соответствует селектору, вот фиксированная скрипка -> jsfiddle.net/J88uS/3
Показать ещё 1 комментарий
0

Ive создал скрипку, которая является более простой реализацией:

HTML:

<div class="group origin">
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">Email</label>
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">SMS</label>
</div>

<a href="#" class="cloner">Clone!</a>

Javascript:

var original= $(".origin");
var cloneNum = 0;
$(".cloner").on("click", function(e){
    e.preventDefault();

    cloneChecks();
});

function cloneChecks(){
    console.log("cloning..."); 
    cloneNum++;
    var clone = original.clone();
    clone.removeClass("origin");
    clone.find("input").each(function(){
        $(this).attr("name", "UPDATE_METHOD[" + cloneNum + "][]");
    });
    original.after(clone);
}

Вы можете настроить это, конечно, чтобы удалить группу div, но принцип очень прост.

Пример: http://jsfiddle.net/q3n7s/1/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню