チェックボックスをオンにした後、テキストエリアと選択タグを表示する方法は？

Question

私のコードでこれらの問題が発生しています。

1）チェックボックスをクリックした後、選択ドロップダウンとテキストエリアを表示する必要があります。

2）性別チェックボックスをオンにした後、男性と女性のオプションを表示する必要があります。

私は選択ドロップダウンとテキストエリアのHTMLでデータ型を使用しています。ユーザーが状態チェックボックスをクリックすると、選択ドロップダウンが表示され、アドレスをクリックするとテキストエリアが表示されます。

入力タイプのテキスト、チェックボックス、ラジオ、電子メールは使用できますが、ドロップダウンとテキストエリアは表示できません。

あなたは私を助けてくれますか？選択し、テキスト領域フォーム要素がタグを使用して作成されていないためだ

$(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/3.2.1/jquery.min.js"></script> 
 

 
<input type="checkbox" name="check-fields" class="add_input" id="get_select" data-type="select"><label for="get_select">State</label> 
 
<input type="checkbox" name="check-fields" class="add_input" id="get_textarea" data-type="textarea"><label for="get_textarea">Address</label> 
 

 
<!--gender--> 
 
<input type="checkbox" name="check-fields" class="add_input" id="get_radio" data-type="radio"><label for="get_radio">Gender</label> 
 
<input type="radio" name="check-fields" id="get_radio" value="male">male 
 
<input type="radio" name="check-fields" id="get_radio" value="female">female 
 
<span id="items"></span>

Answer 1

これを試してください。

$(function() { 
$('.radio').hide(); 
    $(".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(); 
    } 
    }); 
    $("#get_textarea").change(function() { 
    if (this.checked) { 
     $("#items").append('<div class="' + this.id + '"><textarea rows="4" cols="50"></textarea></div>'); 
    } else { 
     $('#items').find('.' + this.id).remove(); 
    } 
    }); 
    $("#get_radio").change(function() { 
    if ($(this).is(':checked')) { 
     $('.radio').show(); 
    }else{ 
    $('.radio').hide(); 
    } 
    }); 
}); 

ここにはfiddleがあります。

Answer 2

。私はあなたが戻って、彼らがどのように作成されるかを調べることをお勧めします。それを実現するには、コードを少し修正する必要があります。しかし、テキスト領域よりもselectタグのほうがそうです。

https://www.w3schools.com/tags/tag_select.asp https://www.w3schools.com/tags/tag_textarea.asp

編集：あなたの代わりに隠れるのHTMLを作成するつもりなら/ HTMLを示し、私はあなたが作成しているタグIDが既に前に存在していないことを確認するためにチェックすることをお勧め それを作成します。