入力ソースの種類が表示ソースで未定義の場合

Question

3つのチェックボックスがあり、2つが自動的に選択されています。私はチェックボックスが選択されているラベルでテキストフィールドを表示する必要があります。

私は以下のコードを試しましたが、1つのテキストフィールドのみを表示しています。タイプは未定義です。ビューソースをチェックしました。 thisに問題があると思います。 私を助けてくれますか？

$(document).ready(function(){ 
 
    $checkbox=$(".add_student_input").is(":checked"); 
 
     if($checkbox == true) { 
 
      $(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>'); 
 
      } else { 
 
       //check false 
 
        $('.students_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="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label> 
 
    <input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label> 
 
    <input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label> 
 
<span class="students_items"></span>

Answer 1

$(".add_student_input")のループがないため、3つのチェックボックスが表示されます。したがって、each()を使用して、3つすべてのチェックボックスをループし、checkedチェックボックスをチェックして、それに対応するtext要素を作成する必要があります。

$(document).ready(function(){ 
 
    $checkbox=$(".add_student_input"); 
 
    $checkbox.each(function(){ 
 
     var isChecked = $(this).is(":checked"); 
 
     if(isChecked) { 
 
      $(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>'); 
 
      } else { 
 
       //check false 
 
        $('.students_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="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label> 
 
    <input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label> 
 
    <input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label> 
 
    
 
    <div class='students_items'></div>

Answer 2

あなたのコード内のクラス「students_items」でHTML要素を持っていないことが表示されますので、JavaScriptをのこの部分は実行されません。 $(".students_items").append('<div class=....)

要素を作成します。そのようなCSSクラスで再試行してください。