Клонирование Флажки с разными названиями

Для лучшего понимания того, что я хочу сделать, вот скриншотКлонирование Флажки с разными названиями

enter image description here

Я хочу, чтобы иметь возможность представить ли Флажки проверки или нет. Для этого я использовал трюк, чтобы иметь скрытые поля ввода, потому что в противном случае непроверенные поля не отправляются. Теперь я хочу сделать пару (один скрытый, один флажок) с тем же именем, но каждая пара имеет другое имя. Я пробовал совсем немного с javascript и jQuery, но не мог понять, как это сделать. Кнопка «+» предназначена для добавления дополнительных флажков, кнопка «-» предназначена для их повторного удаления.

<html> 
<head> 
<title>test</title> 
<script type="text/javascript"> 
function clone(button, objid) 
{ 
    tmpvalue = document.test.elements['param[]'][1].value; 

    document.test.elements['param[]'][1].value = ''; 

    var clone_me = document.getElementById(objid).firstChild.cloneNode(true); 
    button.parentNode.insertBefore(clone_me, button); 

    document.test.elements['param[]'][1].value = tmpvalue; 
} 

function remove_this(objLink) 
{ 
    objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode); 
} 
</script> 
</head> 
<body> 
<form name="test" method="post" action="test2.php"> 
    <input name="param[0]" value="0" type="hidden"> 

    <div id="hidden" style="visibility:hidden; display:none"> 
    <div id="table"><table> 
     <tr><td> 
      <input name="param[]" type='hidden' value="0"> 
      Parameter: <input name="param[]" type="checkbox" value="1"> 
     </td> 
     <td> 
      <span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button"> 
     </td> 
     </tr> 
    </table></div> 
    </div> 

    <div> 
     <input style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button"> 
     <button type="submit" name="sent">Submit</button> 
    </div> 
</form> 
</body> 
</html>

Так это было на самом деле неплохо иметь какой-то счетчик, как это:

<input name="param[i]" type='hidden' value="0"> 
Parameter: <input name="param[i]" type="checkbox" value="1">

Спасибо за вашу помощь!

источник

2014-11-25 KrawallKurt

Я не могу загрузить ваше изображение (моя сеть блокирует его), так что, в общем, когда вы хотите клонировать вещи, вы должны: 1) создать шаблон без идентификаторов типа ' 'в plain html, завернутый в элемент' display: none', а затем 2), используйте jQuery $ .clone() для создания копии, 3) имена/идентификаторы/метки обновления с функцией, которая также хранит счетчик. В этой скрипте есть какая-то логика: http://jsfiddle.net/briansol/5h4cM/1/ Затем 4) фактически добавьте клон в DOM – briansol

Как насчет того, чтобы присвоить свои флажки классу (например, «checkClass»), а затем отсканировать все элементы этого класса с помощью jQuery? Например:

// instead of $('button[type="submit"]') give your button an ID and use # selector 
$('button[type="submit"]').click(function(){ 
    //lets get all checkboxes.. 
    $('.checkClass').each(function(){ 
     // get their checked status 
     var checked = $(this).is(':checked'); 
     // ..and do whatever you need here.. 
    }); 
});

С точки зрения добавления новой строки на кнопку «плюс» нажмите. Попробуйте использовать метод jquery «Добавить». Как так ..

$('#plusButtonId').click(function(){ 
    var rowHtml = '<tr><td>Parameter: <input name="param[]" type="checkbox" class="checkClass" value="1"></td><td><input value="-" type="button" class="remButton"></td></tr>'; 
    $('#table').append(rowHtml); 
});

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

И последнее, но не менее важное - это отличный пример, с чего начать с AngularJS. Это был бы только один контроллер, div с «ng-repeat» и несколько методов. Попробуйте это;)

источник

2014-11-25 21:46:44

Клонирование Флажки с разными названиями

ответ

Смежные вопросы