追加后如何增加复选框ID-JQuery

我有一个默认的复选框,单击添加按钮后将出现其他复选框。我需要检查是否已选中一个复选框。但是这里的问题是我的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>

上面的脚本仅在默认复选框上有效。我需要脚本来处理所有新的追加复选框。我该如何解决?

评论
  • krerum
    krerum 回复

    ID在HTML中应该是唯一的。因此,将其更改为类。另外,您正在向DOM添加新元素。因此,您应该在文档上而不是元素本身上添加一个事件侦听器。

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

    You can store the previous value id as local variable like below.

    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="0" name="correct_hidden[][correct]" value="0"/>           
    <input type="checkbox" class ="" id="correct" name="correct[][correct]"/>
    <button class="" id = "btn_add"> Add</button>
    </form_answer>