Question

寻找一种使用复选框制作动态列表的方法＆＃34;另一项＆＃34;能够在请求时删除，如下图所示：

它应该支持添加和删除项目。

修改

我的代码就像：

<div id="contactdetails">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-list"></i></span>
          <input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
        </div>
        <p class="note">Example: Mike</p>
      </div><!--row and col-->

      <div class="col-lg-6 col-md-12">
          <div class="form-group">
              <div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
                <input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
              </div>
            <p class="note">Example: Johnson</p>
          </div>
      </div>
    </div> <!--row and col-->

 <div class="row">
      <div class="col-lg-12 col-md-12">
       <div class="checkbox" style="padding-left:10px; margin-top: 0px;">
          <span>
            <label>
              <input name="addmore" id="addmore" type="checkbox" class="checkbox style-2"> 
              <span> More contacts</span> 
            </label>
          </span>
        </div>
      </div>
    </div> <!--row and col-->

</div><!--contact details-->

Answer 1

试试这个。正如我之前提到的，您可以使用$.clone()来实现这一目标。

<div>
<table>
<tr>
  <td>
    Item1
  </td>
  <td>
    Item2
  </td>
</tr>
<tr>
  <td>
    <input type="checkbox">
  </td>
</tr>    
</table>    
</div>
<script>
    $(document).on("click",":checkbox",function()
    {
     if($(this).is(":checked")) 
      {
        var clonedItem = $(this).closest('table').clone(); 
        $(clonedItem).find(":checkbox").removeAttr("checked");
        $(clonedItem).appendTo("div");   
      }
      else
      {
        if($(document).find(":checkbox").length > 0)
        $(this).closest('table').remove();
      }
    });
</script>

示例：https://jsfiddle.net/DinoMyte/sgcrupm8/1/

Answer 2

如果选中该复选框，您可以将项目附加到容器并删除每个项目。

$("body").on("click","input[type='checkbox']",function()
{
  if(!$(this).is(":checked"))
  {
    $(this).parent().remove();
  }
  else
  {
    $("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>
</div>

包含复选框

2 个答案: