Как увеличить идентификатор флажка после добавления - JQuery

Question

У меня установлен один флажок по умолчанию, а остальные флажки появятся после того, как я нажму кнопку добавления. Мне нужно проверить, установлен ли флажок или нет. Но проблема здесь в том, что мой jquery работает только по умолчанию. Код следующий:

HTML:

<form_answer>
<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/>           
<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>
<button class="" id = "btn_add"> Add</button>
</form_answer>

JS:

<script>
    $(document).ready(function(){
        $('#btn_add').click(function(){
            add_row();
        });
    });

    function add_row(){
        var id = $("#row").val();
        id++;
        var html =  '<div class="">  ' +
                    '<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/> ' +
                    '<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>' +
                    '</div>' ;
        $("form_answer").append(html);
        $("#row").val(id);
    } 


$(document).ready(function(){
    $("#correct").click(function () {
        if ($(this).prop("checked")) {
            $("#correct_hidden").val("1");
        }else{
            $("#correct_hidden").val("0");
        }
    });
});
</script>

Сценарий выше работает только с флажком по умолчанию. Мне нужен скрипт для работы над всеми новыми флажками добавления. Как я могу решить это?

Answer 1

Вы можете сохранить предыдущее значение id как локальную переменную, как показано ниже.

var id = 0;
$(document).ready(function(){
        $('#btn_add').click(function(){
            add_row();
        });
});

function add_row(){
    id++;
    var html =  '<div class="">  ' +
                '<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/> ' +
                '<input type="checkbox" class ="" id='+ id +' name="correct[][correct]"/>' +
                '</div>' ;
    $("form_answer").append(html);
    console.log("Id value: " + id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form_answer>
<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/>           
<input type="checkbox" class ="" id="0" name="correct[][correct]"/>
<button class="" id = "btn_add"> Add</button>
</form_answer>

Answer 2

Идентификаторы должны быть уникальными в Html. Так что поменяй это на класс. Также вы добавляете новые элементы в DOM. Поэтому вы должны добавить список событий в документ, а не в сам элемент.

Удалите идентификатор и поместите его в класс:

<input type="checkbox" class ="correct" id="" name="correct[][correct]"/>

Затем измените свой js, чтобы он не t добавить идентификаторы

var html =  '<div class="">  ' +
                    '<input type="hidden" class ="correct_hidden" id="" name="correct_hidden[][correct]" value="0"/> ' +
                    '<input type="checkbox" class ="correct" id="" name="correct[][correct]"/>' +
                    '</div>' ;

Наконец, измените список событий на документ и вызовите его в этом классе

$(document).on('click', '.correct', function () {
    if ($(this).prop("checked")) {
        $("#correct_hidden").val("1");
    }else{
        $("#correct_hidden").val("0");
    }
});