Question

我有一个名为Firstname，Lastname和Email的复选框。我必须在单击复选框后显示输入类型，或者如果未选中，则删除复选框。

此外，我正在尝试选中复选框的标签，但我没有收到它。

你能帮助我吗？

$(document).ready(function() {
  $(".add_text_type").click(function() {
    if ($('.add_text_type').is(":checked")) {
      var get_label = $('label[for="' + +$(this).attr('id') + '"]').text();
      $("#items").append('<div><label class=' + get_label + '></label><input type="text" name="input[]"></div>');
    } else {
      //what login I have to use here when unchecked check box
    }
  });
});

$(document).ready(function() {
  $(".add_email_type").click(function() {
    if ($('.add_email_type').is(":checked")) {
      $("#items").append('<div><input type="email" name="input[]"></div>');
    } else {
      //what login I have to use here when unchecked check box
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check-fields" class="add_text_type" id="get_first_name">
<label for="get_first_name">First Name</label>

<input type="checkbox" name="check-fields" class="add_text_type" id="get_last_name">
<label for="get_last_name">Last Name</label>

<input type="checkbox" name="check-fields" class="add_email_type" id="get_email">
<label for="get_email">Email</label>

Answer 1

执行此操作的最简单方法是将div元素作为id附加到class复选框，以便在需要时轻松识别它们删除它们。

您还可以通过提供type的{{1}}来添加input作为data属性的复选框，以便在change事件中阅读处理程序，像这样：

＆＃13;

$(function() {
  $(".add_input").change(function() {
    if (this.checked) {
      $("#items").append('<div class="' + this.id + '"><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" /></div>');
    } else {
      $('#items').find('.' + this.id).remove();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check-fields" class="add_input" id="get_first_name" data-type="text">
<label for="get_first_name">First Name</label>

<input type="checkbox" name="check-fields" class="add_input" id="get_last_name" data-type="text">
<label for="get_last_name">Last Name</label>

<input type="checkbox" name="check-fields" class="add_input" id="get_email" data-type="email">
<label for="get_email">Email</label>

<div id="items"></div>

＆＃13;

取消选中复选框后，输入类型文本字段将重复

1 个答案: