チェックボックスをオフにした後、入力タイプのテキストフィールドが繰り返されます

Question

名前、姓、電子メールというチェックボックスがあります。チェックボックスをクリックした後に入力タイプを表示するか、チェックボックスをオフにしてチェックボックスを外す必要があります。

また、選択されているチェックボックスのラベルを取得しようとしていますが、取得できません。

これで私を助けてくれませんか？

$(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

これを実行する最も簡単な方法は、あなたが削除する必要があるとき、彼らは簡単に識別できるように、あなたはclassとして、チェックボックスのidを追加div要素を与えることであろうそれら。

また、このように、changeイベントハンドラで読み取ることができますチェックボックスにdata属性として追加するinputのtypeを提供することにより、コードを乾燥させることができる。

$(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(); 
 
    } 
 
    }); 
 
});

<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>