Переустановка формы с помощью jQuery?

Question

У меня установлен этот скрипт, который перекликается со всеми соответствующими пользователями в базе данных с страницей с флажками рядом с ними. Вы можете сделать группу из этих пользователей в базе данных, проверив некоторые из полей и отправив форму. Все это прекрасно работает.

К сожалению, нашему дизайнеру это не нравится. То, что она хочет, в основном представляет собой список из шести пустых полей в левой части экрана. Затем, когда вы нажимаете кнопку «плюс» рядом с именем человека справа от экрана, это имя появляется в первом пустом поле ... и так далее с каждой последующей кнопкой «плюс», которая нажата.

Так что вместо того, чтобы перекодировать все это (это действительно не вариант), я думаю, что я могу просто «перестроить» все это с помощью jQuery. Я могу установить флажки, чтобы они выглядели как плюс, когда они не были выбраны, и минус, когда они выбраны.

Тогда мне просто нужно иметь какое-то событие, чтобы при щелчке по флажку имя человека было взято и вставлено в первый пустой ящик. Это всего лишь дым и зеркала. Пустое поле может быть просто div с рамкой. Функционально все будет работать так же, как и раньше.

Может ли кто-нибудь подтвердить, возможно ли это? Мои знания JS отстойны, и я не уверен, с чего начать. Плюс у меня уже есть следующий JQuery функции валидатор на странице, и я не хочу этот новый JS мешать ему:

$(document).ready(function(){ 
$("#myform").validate({ 
    debug: false, 
    rules: { 
     group: {required: true}, 
    }, 
    messages: { 
     group: {required: " Field required.", loginRegex: " Invalid character."}, 
    }, 
    submitHandler: function(form) { 
     $('input[type=submit]').attr('disabled', 'disabled'); 
     $('#results').html('Loading...'); 
     $.post('process_group.php', $("#myform").serialize(), function(data) { 
      $('#results').html(data); 
     }); 
    } 
    }); 
}); 

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

Answer 1

Если я вас правильно понимаю, что вам нужно сделать следующие вещи с JQuery:

1) Замените флажки(), сгенерированные на стороне сервера код с интерактивными +/- знаками.

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

$('checkbox').remove().html('<a href="#" style="background-image:plusSign.png">Some Name</a>');

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

2) Вы хотите изменить + к - когда она нажата, и 3) имеют имя пользователя рядом со знаком + появится в другом месте (в пустом поле ввода)

Для переключения? фоновое изображение, просто измените стиль (или класс, если вы знаете, как сделать изображение классом CSS) при нажатии. Затем возьмите содержимое и поместите его в свой целевой элемент.

Это jsFiddle может помочь проиллюстрировать то, что я описываю выше: http://jsfiddle.net/Ap2yW/1/