Question

我尝试添加和删除表单中的输入和复选框，但我遇到的示例不允许我使用自定义文本添加这些示例。我如何使用JQuery实现这一目标？

以下是我的模板：https://jsfiddle.net/cg1uoh9w/4/

<!-- -->

<div class="sub-container-title">This is what I want to appear above the first box</div>

<ul class="no-style">
  <li>Title</li>
  <li>
    <input type="text" name="text_area" class="text_area added" maxlength="50" />
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">remove</button>
    </span>
  </li>
</ul>

<!-- -->

<div class="sub-container-title">This is what I want to appear above the second box</div>

<ul class="no-style">
  <li>
    <label><input type="checkbox" value="">Option 1</label>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">remove</button>
    </span>
  </li>
</ul>

Answer 1

这就是你的表现......

<div>
  <input type="text" name="add_input_field" class="add_input_field" placeholder="Write input name"><input type="submit" name="add_input_submit" class="add_input_submit"><br />
  <input type="text" name="add_checkbox_field" class="add_checkbox_field" placeholder="Write checkbox name"><input type="submit" name="add_checkbox_submit" class="add_checkbox_submit"><br />
</div>
<div class="new_fields_container">
</div>

在常规HTML上查看提交按钮和文本字段上的类标记。

然后使用jQuery

$('.add_input_submit').click(function(event) {
  event.preventDefault();
  var input_name = $('.add_input_field').val();
  var remove_name = input_name.split(' ').join('_');

  $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="text" name="' + input_name + '" placeholder="' + input_name + '">' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>');
});

$('.add_checkbox_submit').click(function(event) {
  event.preventDefault();
  var input_name = $('.add_checkbox_field').val();
  var remove_name = input_name.split(' ').join('_');


  $('.new_fields_container').append('<div new_input="' + remove_name + '"><input type="checkbox" name="' + input_name + '" value="' + input_name + '"> ' + input_name + '<input type="submit" class="remove" new_input_name="'+ remove_name +'" value="remove"><br /></div>');
});

$('body').on('click', '.remove', function(event) {
  event.preventDefault();
  var input_name = $(this).attr('new_input_name');
  $('[new_input='+input_name+']').remove();
});

jQuery正在侦听提交按钮上的点击，具体取决于类名，例如 $（＆＃39; .add_input_submit＆＃39;）。< / p>

.val（）; 实际上正在读取输入字段，因此您需要它的名称并将其保存在变量上，然后您可以在下一步创建的HTML中包含该名称步骤。

event.preventDefault（）; 将停止＆＃34;表单＆＃34;按字面提交（jQuery不需要提交实际表单，因为它一直在听取点击次数。）

.append（）正在将实际的HTML代码（因此您的新输入值）添加到您在此案例中选择的动态div new_fields_container

删除

现在要删除我添加了 $（＆＃39; body＆＃39;）。（＆＃39;点击＆＃39;，＆＃39;。删除＆＃39; 这个。点击是不同的，因为它需要听取ajax生成的元素，这就是为什么它会解析网站的整个正文以听取点击。

我还在生成的HTML中添加了删除按钮，并为每个新字段添加了 div 容器。

现在 .remove（）; 将使用 new_input =＆＃34;＆＃34; 属性搜索 div ，它将删除它。

继承代码

删除时更新：

Fiddle example

希望这有帮助！

添加和删除检查和输入框

1 个答案:

添加和删​​除检查和输入框

1 个答案:

添加和删除检查和输入框